jQuery検証プラグインとInternetExplorerに問題があります。基本的に、「有効な電子メールアドレスを入力してください」というエラーメッセージがページの読み込み時に表示されます。すべての検証は正しく機能しますが、ユーザーがデータを入力する前にそこにいるのはかなり見苦しいです。
電子メールクラスを削除し、フィールドを必須にするだけで問題はありませんが、電子メールアドレスを検証する必要があります。
IE7/8/9でこの問題が発生しています
これが私のコードです：
//Form Validation
$(document).ready(function(){
$("#rsvpForm").validate({
rules: {
// simple rule, converted to {required:true}
attendance: "required",
firstname_main: "required",
lastname_main: "required",
// compound rule
email: {
required: true,
email: true
},
total_guests: {
required: "#attendance:checked"
},
firstname_partner: {
required: function(element) {
return $("input:radio[name='total_guests']:checked").val() == '2' || $("input:radio[name='total_guests']:checked").val() == '3' || $("input:radio[name='total_guests']:checked").val() == '4'
}
},
lastname_partner: {
required: function(element) {
return $("input:radio[name='total_guests']:checked").val() == '2' || $("input:radio[name='total_guests']:checked").val() == '3' || $("input:radio[name='total_guests']:checked").val() == '4'
}
},
firstname_child1: {
required: function(element) {
return $("input:radio[name='total_guests']:checked").val() == '3' || $("input:radio[name='total_guests']:checked").val() == '4'
}
},
lastname_child1: {
required: function(element) {
return $("input:radio[name='total_guests']:checked").val() == '3' || $("input:radio[name='total_guests']:checked").val() == '4'
}
},
firstname_child2: {
required: function(element) {
return $("input:radio[name='total_guests']:checked").val() == '4'
}
},
lastname_child2: {
required: function(element) {
return $("input:radio[name='total_guests']:checked").val() == '4'
}
},
}
});
jQuery.extend(jQuery.validator.messages, {
required: 'Required',
});
});
// Submit Handler
$(document).ready(function() {
$('#rsvpForm').ajaxForm({
target: '#content',
url: 'components/process-form-data.php'
});
});
これらは私のヘッダーリンクです：
<script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script type="text/javascript" src="../javascript.js"></script>
フォームHTML：
<form method="post" action="components/process-form-data.php" id="rsvpForm">
<fieldset>
<label for="attendance">Will you be attending the wedding? <em>*</em></label>
<div class="radioBtns">
<input class="signUp" type="radio" value="Yes" name="attendance" id="attendance" />
<label class="signUp">Yes</label>
<input class="signUp" type="radio" value="No" name="attendance" />
<label class="signUp">No</label>
</div>
</fieldset>
<h2>Main Guest</h2>
<fieldset>
<label for="firstname_main" class="standard">First name<em>*</em> :</label>
<input type="text" name="firstname_main" id="firstname_main" placeholder="First name" />
</fieldset>
<fieldset>
<label for="lastname_main" class="standard">Last name<em>*</em> :</label>
<input type="text" name="lastname_main" id="lastname_main" placeholder="Last name" />
</fieldset>
<fieldset>
<label for="email" class="standard">Email<em>*</em> :</label>
<input type="text" name="email" id="email" placeholder="Email" />
</fieldset>
<div id="guests">
<fieldset class="wideField">
<label for="total_guests">Will you be bringing a partner and/or young children? <em>*</em></label>
<div class="radioBtns">
<input class="signUp" type="radio" value="1" name="total_guests" id="total_guests" />
<label class="signUp">No</label>
<input class="signUp" type="radio" value="2" name="total_guests" />
<label class="signUp">Just Partner</label>
<input class="signUp" type="radio" value="3" name="total_guests" />
<label class="signUp">Partner + 1 young child</label>
<input class="signUp" type="radio" value="4" name="total_guests" />
<label class="signUp">Partner + 2 young children</label>
</div>
</fieldset>
</div>
<div id="partnerDetails" style="display:none;">
<h2>Partner Details</h2>
<fieldset>
<label for="firstname_partner" class="standard">First name<em>*</em> :</label>
<input type="text" name="firstname_partner" id="firstname_partner" placeholder="First name" />
</fieldset>
<fieldset>
<label for="lastname_partner" class="standard">Last name<em>*</em> :</label>
<input type="text" name="lastname_partner" id="lastname_partner" placeholder="Last name" />
</fieldset>
</div>
<div id="childDetails" style="display:none;">
<h2>Child Details</h2>
<fieldset>
<label for="firstname_child1" class="standard">First name<em>*</em> :</label>
<input type="text" name="firstname_child1" id="firstname_child1" placeholder="First name" />
</fieldset>
<fieldset>
<label for="lastname_child1" class="standard">Last name<em>*</em> :</label>
<input type="text" name="lastname_child1" id="lastname_child1" placeholder="Last name" />
</fieldset>
</div>
<div id="secondChildDetails" style="display:none;">
<fieldset>
<label for="firstname_child2" class="standard">First name<em>*</em> :</label>
<input type="text" name="firstname_child2" id="firstname_child2" placeholder="First name" />
</fieldset>
<fieldset>
<label for="lastname_child2" class="standard">Last name<em>*</em> :</label>
<input type="text" name="lastname_child2" id="lastname_child2" placeholder="Last name" />
</fieldset>
</div>
<div id="diet">
<fieldset class="wideField">
<label for="dietaryRequirements">Do any of your guests have special dietary requirements :</label>
<textarea cols="55" rows="8" name="dietaryRequirements" id="dietaryRequirements"></textarea>
</fieldset>
</div>
<input id="submit_btn" input="" type="submit" value="Submit RSVP" class="btn" />
</form>