1
jQuery Validator plugin의 최신 버전을 jQuery (1.6.2)와 함께 사용하고 있습니다.jQuery Validator가 선택적 필드를 "오류"로 표시합니다.
나는 간단한 전화 번호부 필드 인 Phone을 가지고 있습니다. 다음 코드는 모든 필드가 "필수"일 때 완벽하게 작동합니다. 문제는 오늘 선택적 필드를 추가했고 Validator는이 선택적 필드에 대한 규칙을 무시하는 것 같습니다.
HTML : 나는 qTip2이 검증시 필수 필드를 나타 내기 위해 사용
<div id="contact">
<form id="contactForm" action="/cgi-bin/FormMail.pl" method="post">
<input type="hidden" name="subject" value="Contact Form" />
<input type="hidden" name="redirect" value="thankyou.html" />
<input type="hidden" name="required" value="Name,email,Comments" />
<input type="text" class="autoclear blur defaultInvalid" value="your full name" name="Name" /><br />
<input type="text" class="autoclear blur defaultInvalid" value="your email address" name="email" /><br />
<input type="text" class="autoclear blur defaultInvalid" value="your phone number" name="Phone" />
<fieldset id="radioset">
<input type="radio" id="radio-1" name="recipient" value="[email protected]" checked="checked" /><label for="radio-1">Label 1</label>
<input type="radio" id="radio-2" name="recipient" value="[email protected]" /><label for="radio-2">Label 2</label>
<input type="radio" id="radio-3" name="recipient" value="[email protected]" /><label for="radio-3">Label 3</label>
</fieldset>
<textarea class="autoclear blur defaultInvalid" name="Comments">your comments</textarea><br />
<input type="submit" value="Send Message" />
</form>
</div>
.
(기술적으로) 모든 것이 작동하고 있으며 유효성 검사를하고 qTip 툴팁이 표시됩니다.
전체적인 문제는 "전화"가 선택 사항이라는 내 매개 변수에도 불구하고 필요에 따라 "전화"를 계속 표시하고 빈 q 팁을 표시하는 것입니다. QTip2는 단지 class="error"을 찾고 있기 때문에 여기에 문제가되지 않습니다. 내 규칙에도 불구하고 Validator가 class="error"을 선택적 필드에 적용한다는 것을 DOM에서 볼 수 있습니다.
(I는 required: false이 기본 알고하지만 난이 문제로 인해 어쨌든 그 규칙을 추가했다. 그것은 여전히 무시됩니다!)
사람이 볼 수 왜이 일을하고있을 것인가?
jQuery를/자바 스크립트 : 내가 문제를 발견
$(document).ready(function() {
var nameMsg = "Please enter your full name.",
emailMsg = "Please enter your email address.",
emailMsgV = "This is not a valid email address.",
commentsMsg = "Please enter your comments.";
$('#contactForm').validate({
onkeyup: false,
validClass: 'valid',
rules: {
Name: {
required: true
},
email: {
required: true,
email: true
},
Phone: {
required: false
},
Comments: {
required: true
}
},
messages: {
Name: nameMsg,
email: {
defaultInvalid: emailMsg,
required: emailMsg,
email: emailMsgV
},
Comments: commentsMsg
},
success: function(error) {
setTimeout(function() { // Use a mini timeout to make sure the tooltip is rendred before hiding it
$('#contactForm').find('.valid').qtip('destroy');
}, 1);
},
submitHandler: function(form) {
form.submit();
},
errorPlacement: function(error, element) {
$(element).filter(':not(.valid)').qtip({ // Apply the tooltip only if it isn't valid
overwrite: false,
content: error,
position: {
my: 'bottom left',
at: 'top left',
viewport: $(window),
adjust: {
x: 25
}
},
show: {
event: false,
ready: true
},
hide: false
}).qtip('option', 'content.text', error);
} // closes errorPlacement
}) // closes validate()
}); // closes document.ready()