基本的なルールを持つフォームにいくつかのフィールドがあり、バリデータプラグインはフォーム自体に入力するときにうまく機能します。ただし、送信すると、有効なメールアドレスが入力されていない場合や、他のテキストボックスに何も入力されていない場合でも送信されるため、問題があります。
ここに私のテスト関数があります:
$(function() {
$("#submit_form_contact").validate({
errorLabelContainer: '#errors'
});
$('#contact_submit').click(function(e){
if ($("#submit_form_contact").valid()) {
alert ('valid!');
} else {
alert ('invalid!');
}
});
});
HTML:
<form class="pure-form pure-form-aligned" id="submit_form_contact" novalidate>
<fieldset>
<div class="pure-control-group">
<label for="name">Your Name:</label>
<input id="name" type="text" placeholder="Name" required>
</div>
<div class="pure-control-group">
<label for="email">Your Email:</label>
<input id="email" type="email" placeholder="Email Address" required>
</div>
<div class="pure-control-group">
<label for="email_text">Inquiry Type: </label>
<select id="inquiry_dropdown" class="pure-input-1-2">
<option>General</option>
<option>Sales & Marketing</option>
<option>Press & Editorial</option>
</select>
</div>
<div class="pure-control-group">
<label for="message" style="vertical-align: top;">Message:</label>
<textarea id="message" type="text" placeholder="Enter message here..." required></textarea>
</div>
<div id="errors" style="text-align: center; color: red;"></div>
<button id="contact_submit" class="pure-button pure-button-primary" style="background-color: #003A70; float:right; margin-right: 35px;margin-top:15px;">Submit</button>
</div>
</fieldset>
</form>
...それは常に有効であると警告します。フォームのすべてのフィールドは「必須」とマークされています。どんな助けでも大歓迎です。JSFiddle: http://jsfiddle.net/RcNTj/