I am working on simple form validation with jQuery
In fact I used jQuery plugin to validate email address field, now I wanna put an individual validation for name field I tried it too, but it's not working and I am unable to figure out the problem behind.
<html>
<head>
<meta charset="utf-8">
<title>Makes "field" required and an email address.</title>
<link rel="stylesheet" href="main.css" type="text/css" />
<script language="javascript" type="text/javascript" src=".8.3/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src=".validate/1.10.0/jquery.validate.min.js"></script>
<script>
$(function() {
$( "#myform" ).validate({
rules: {
name: {
required: true,
minlength: 4,
maxlength: 20,
customvalidation: true
}
},
messages: {
name: {
required: "Dude, enter a name",
minlength: $.format("Keep typing, at least {0} characters required!"),
maxlength: $.format("Whoa! Maximum {0} characters allowed!")
}
}
});
$.validator.addMethod("customvalidation",
function(value, element) {
return /^[A-Za-z\d=#$%@_ -]+$/.test(value);
},
"Sorry, no special characters allowed"
);
});
</script>
</head>
<body>
<div id="navbar">
<ul id="nav">
<li><a id="clickBack" href="backPage.htm">clickBack</a></li>
<li><a id="clickForward" href="forwardPage.htm">goForward</a></li>
</ul>
</div><br><br>
<label for="field"> Name: </label>
<input class="left" id="name" name="name" minlength="4" class="required name"/>
<br/>
<form id="myform" method="post" action="">
<label for="field">Email: </label>
<input class="left" id="field" name="field" />
<br/>
<input type="submit" value="Submit">
</form>
<script src=".9.1.min.js"></script>
<script src=".validate.js"></script>
<script src=".js"></script>
<script>
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$( "#myform" ).validate({
rules: {
field: {
required: true,
email: true
}
}
});
</script>
</body>
</html>
need some guidance... Thanks.
I am working on simple form validation with jQuery
In fact I used jQuery plugin to validate email address field, now I wanna put an individual validation for name field I tried it too, but it's not working and I am unable to figure out the problem behind.
<html>
<head>
<meta charset="utf-8">
<title>Makes "field" required and an email address.</title>
<link rel="stylesheet" href="main.css" type="text/css" />
<script language="javascript" type="text/javascript" src="https://ajax.googleapis./ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="http://ajax.aspnetcdn./ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>
<script>
$(function() {
$( "#myform" ).validate({
rules: {
name: {
required: true,
minlength: 4,
maxlength: 20,
customvalidation: true
}
},
messages: {
name: {
required: "Dude, enter a name",
minlength: $.format("Keep typing, at least {0} characters required!"),
maxlength: $.format("Whoa! Maximum {0} characters allowed!")
}
}
});
$.validator.addMethod("customvalidation",
function(value, element) {
return /^[A-Za-z\d=#$%@_ -]+$/.test(value);
},
"Sorry, no special characters allowed"
);
});
</script>
</head>
<body>
<div id="navbar">
<ul id="nav">
<li><a id="clickBack" href="backPage.htm">clickBack</a></li>
<li><a id="clickForward" href="forwardPage.htm">goForward</a></li>
</ul>
</div><br><br>
<label for="field"> Name: </label>
<input class="left" id="name" name="name" minlength="4" class="required name"/>
<br/>
<form id="myform" method="post" action="">
<label for="field">Email: </label>
<input class="left" id="field" name="field" />
<br/>
<input type="submit" value="Submit">
</form>
<script src="http://code.jquery./jquery-1.9.1.min.js"></script>
<script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
<script src="http://jquery.bassistance.de/validate/additional-methods.js"></script>
<script>
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$( "#myform" ).validate({
rules: {
field: {
required: true,
email: true
}
}
});
</script>
</body>
</html>
need some guidance... Thanks.
Share Improve this question edited Sep 23, 2013 at 12:07 default locale 13.5k13 gold badges59 silver badges66 bronze badges asked Sep 23, 2013 at 12:05 lostlost 1651 gold badge4 silver badges10 bronze badges 4- 1 What do you mean by "it's not working"..Can you be more specific ? – coder Commented Sep 23, 2013 at 12:08
- it is not validating name field but email field is fine, it is being validated. – lost Commented Sep 23, 2013 at 12:10
- I think in the required field it should be either true or false and you have given string over there. – coder Commented Sep 23, 2013 at 12:13
- nops i tried it is not working... but these are the messages na..... – lost Commented Sep 23, 2013 at 12:18
2 Answers
Reset to default 3Try using this best JQuery validation plugin
username: {
required: true,
minlength: 2
},
messages: {
username: {
required: "Please enter a username",
minlength: "Your username must consist of at least 2 characters"
},
If you want custom validation you can try this:
$.validator.addMethod("customvalidation", function(value, element) {
return this.optional(element) || /^[a-z0-9\-]+$/i.test(value);
}, "Username must contain only letters, numbers, or dashes.");
Hi a few points which might help this work :
- Try use an id that is not "reserved" or ambiguos (since
nameis already an attribute of the element it could be misleading. When I got your script working on my side, it would work withid="firstName"for eg. but notid="name") - Make sure the element you're validating is in the form you're running the validation on (in your code sample, the name element is sitting outside
myform - Combine the two
$("#myform").validate(...)methods in two different script blocks, you don't need a seperate one for email and name, you can list them together!
Hope that helps, good luck!