0
HTML5 유효성 검사를 지원하지 않는 브라우저에서이 기능을 사용할 수 있도록하고 싶습니다. 기본적으로 HTML5를 사용하는 브라우저에서 기본적으로 기본 오류를 제공하고 각 입력, 레이블 및 부모 div에 오류 클래스를 추가하여 오류가있는 각 필드에 추가 CSS 효과가 적용됩니다. 빨간색 텍스트/테두리와 같은 브라우저에서 기본 오류 메시지가 표시되지만 입력, 레이블 또는 div에 오류 클래스가 추가되지 않습니다. 필드 중 하나에서 HTML5를 제거하고 양식의 나머지 부분을 채우면 내 기능이 실행되고 오류 클래스가 추가됩니다. 아래에서 오류 클래스를 추가하기 위해 내 양식과 jQuery 함수를 볼 수 있습니다.HTML5 유효성 검사 (Jquery 포함)
내가 생각하는 것은 HTML5에서 오류 클래스를 추가하는 제출 기능을 실행하지 않는 오류를 발견했을 때입니다. 각 입력에 대해 유효하지 않은 바인드 함수를 트리거하고 오류 클래스를 추가 할 수 있다고 생각했지만 브라우저가 HTML5 유효성 검사를 지원하지 않는 경우 유효성을 확인하지 못했습니다.
jQuery를 부분 :
$('#contact_us_form').submit(function() {
var error_count = 0;
$('#contact_us_form div').each(function() {
$(this).removeClass('error');
});
$('#contact_us_form input').each(function() {
$(this).removeClass('error');
});
$('#contact_us_form label').each(function() {
$(this).removeClass('error');
});
if ($('#fname').val() == '') {
error_count++;
$('#fname').parent('div').addClass("error");
$('#fname').addClass("error");
$('label[for="fname"]').addClass("error");
}
if ($('#lname').val() == '') {
error_count++;
$('#lname').parent('div').addClass("error");
$('#lname').addClass("error");
$('label[for="lname"]').addClass("error");
}
if ($('#email').val() == '') {
error_count++;
$('#email').parent('div').addClass("error");
$('#email').addClass("error");
$('label[for="email"]').addClass("error");
} else if (!isValidEmailAddress($('#email').val())){
error_count++;
$('#email').parent('div').addClass("error");
$('#email').addClass("error");
$('label[for="email"]').addClass("error");
}
if ($('#phone').val() == '') {
error_count++;
$('#phone').parent('div').addClass("error");
$('#phone').addClass("error");
$('label[for="phone"]').addClass("error");
} else if (!isPhone($('#phone').val())) {
error_count++;
$('#phone').parent('div').addClass("error");
$('#phone').addClass("error");
$('label[for="phone"]').addClass("error");
}
if ($('#message').val() == '') {
error_count++;
$('#message').parent('div').addClass("error");
$('#message').addClass("error");
$('label[for="message"]').addClass("error");
}
if (error_count == 0) {
submitFormWithAjax();
}
return false;
});
HTML 양식 :
<form class="form form_careers" action="#" id="contact_us_form">
<fieldset>
<legend>Contact Information</legend>
<div class="field-name-first">
<label for="fname" class="inlined">First Name</label>
<input accesskey="f" class="input-text" id="fname" name="fname" required tabindex="1" type="text" value="" />
</div>
<div class="field-name-last">
<label for="lname" class="inlined">Last Name</label>
<input accesskey="l" class="input-text" id="lname" required tabindex="2" type="text" />
</div>
<div class="field-email-primary">
<label for="email" class="inlined">Email</label>
<input accesskey="e" class="input-text" id="email" required tabindex="3" type="email" />
</div>
<div class="field-phone-primary">
<label for="phone" class="inlined">Phone</label>
<input accesskey="p" class="input-text" id="phone" required tabindex="4" type="tel" />
</div>
<div class="field-message-comments">
<label for="message" class="inlined">Message/Comments</label>
<textarea accesskey="m" class="" id="message" required tabindex="5"></textarea>
</div>
<!--input class="cta_button cta_primary" tabindex="7" type="submit" value="Contact Us" /-->
<button class="cta_button cta_primary" tabindex="6">Contact Us</button>
</fieldset>
</form>