I want to make this compatible for browsers which do not support HTML5 validation. Basically, all I am trying to do is give the basic error by default from the browser with HTML5 and also add a class of error to each input, label and parent div for each field that has an error which I will have some additional CSS effects such as red text/border. What is happening is I get the default error message from the browser but no error classes are added to my input, label or div. If I remove HTML5 required from one of the fields and fill out the rest of the form it will then run my function and add the error classes. Below you will see my form and my jQuery function to add the error classes.
私が考えているのは、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>