Menu
I have been trying for days to get this validation plugin to work in jquery and am having no luck at all.
The code I am using is below.
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.3.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.min.js"></script>
</head>
<script type="text/javascript">
//Jquery Validation, Opening Jquery etc
$(function(){
$("#step1form").validate({
rules: {
firstName: {
required: true
}
}
});
});
</script>
<div class="info">We would love to help you out just give us a few details and you'll be on your way!</div>
<form id="step1form" action="" method="POST">
<input name="firstName" style="width: 100%; margin: 3px 0 3px 0; padding-right: 1%;" type="text" id="firstName" placeholder="First Name (Required)" onfocus="this.placeholder=''" onblur="this.placeholder='First Name (Required)'">
<input style="width: 100%; margin: 3px 0 3px 0; padding-right: 1%;" type="text" id="lastName" placeholder="Surname (Required)" onfocus="this.placeholder=''" onblur="this.placeholder='Surname (Required)'">
<input style="width: 100%; margin: 3px 0 3px 0;" type="text" id="emailaddress" placeholder="Email (Required)" onfocus="this.placeholder=''" onblur="this.placeholder='Email (Required)'">
<input style="width: 100%; margin: 3px 0 3px 0;" type="text" id="mobile" placeholder="Mobile Number (Required)" onfocus="this.placeholder=''" onblur="this.placeholder='Mobile Number (Required)'"><br/><br/>
<input style="float: right; width: 150px;" type="submit" name="submitstep0" value="Next Step"/>
</form>
I have no idea why it is not working but any help is greatly appreciated.
403
asked Jan 28 '26 14:01
you have did everything right but just missed one thing, you have to specify the name of every input type because validation plugin works on the element name.
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.3.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.min.js"></script>
</head>
<body>
<script type="text/javascript">
//Jquery Validation, Opening Jquery etc
$(function(){
$("#step1form").validate({
rules: {
firstName: {
required: true
},
lastName: {
required: true
},
email: {
required: true
},
mobile: {
required: true
}
}
});
});
</script>
<div class="info">We would love to help you out just give us a few details and you'll be on your way!</div>
<form id="step1form" action="" method="POST">
<input name="firstName" style="width: 100%; margin: 3px 0 3px 0; padding-right: 1%;" type="text" id="firstName" placeholder="First Name (Required)" onfocus="this.placeholder=''" onblur="this.placeholder='First Name (Required)'">
<input name="lastName" style="width: 100%; margin: 3px 0 3px 0; padding-right: 1%;" type="text" id="lastName" placeholder="Surname (Required)" onfocus="this.placeholder=''" onblur="this.placeholder='Surname (Required)'">
<input name="email" style="width: 100%; margin: 3px 0 3px 0;" type="text" id="emailaddress" placeholder="Email (Required)" onfocus="this.placeholder=''" onblur="this.placeholder='Email (Required)'">
<input name="mobile"style="width: 100%; margin: 3px 0 3px 0;" type="text" id="mobile" placeholder="Mobile Number (Required)" onfocus="this.placeholder=''" onblur="this.placeholder='Mobile Number (Required)'"><br/><br/>
<input style="float: right; width: 150px;" type="submit" name="submitstep0" value="Next Step"/>
</form>
</div>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With