jQuery validation plugin removes form fields but displays messages after submission
Hi im quite new to jQuery and validation, basically i managed to get the plugin working with the application, however when i test validation and try to submit, it displays the error messages, but completely removes the form fields and then when i click submit again it reappears, so i'm quite confused why it is doing this.
im using jQuery validator plugin, heres the code snippet...
$().ready(function(){
$("#form2").validate({
rules: {
gender: "required",
number: {
required: true,
digits: true //phone number is required AND must be in the form of a valid number
},
dob: {
required: true,
date: true
}
},
messages: {
gender: "gender field cannot be blank!",
number: {
required: "Phone number field cannot be blank!",
digits: "must contain digits only"
},
dob: "Please enter a valid date of birth"
},
submitHandler: function(form){
form.submit();
}
});
});
Here's the HTML code...
<input type = "number" id = "number" name = "number">
<div class="select">
<span class="error">This field is required</span>
<select id = "gender" name = "gender">
<option value = "">Gender</option>
<option value = "male">Male</option>
<option value = "female">Female</option>
</select><br/>
</div>
<label for = "dob">Date Of Birth</label><br/>
<input type = "date" name = "dob" size = "10" id = "dob">
<div id="contact_submit">
<button class="button button3" type = "submit" name = "submit" id = "submit">Next > </button>
</div>
</form>
Topic Participants
cartfredri
jakecigar