validate name with jquery with some custom functions

Question

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.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="http://ajax.aspnetcdn.com/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.com/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.

What do you mean by "it's not working"..Can you be more specific ? — coder
– coder, Commented Sep 23, 2013 at 12:08
it is not validating name field but email field is fine, it is being validated. — lost
– 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
– coder, Commented Sep 23, 2013 at 12:13
nops i tried it is not working... but these are the messages na..... — lost
– lost, Commented Sep 23, 2013 at 12:18

coder · Accepted Answer · 2013-09-23 12:24:14Z

3

Try 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.");

edited Sep 23, 2013 at 12:24

answered Sep 23, 2013 at 12:10

coder

13.2k32 gold badges116 silver badges221 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Stephen James · Accepted Answer · 2013-09-23 12:24:57Z

1

Hi a few points which might help this work :

Try use an id that is not "reserved" or ambiguos (since name is already an attribute of the element it could be misleading. When I got your script working on my side, it would work with id="firstName" for eg. but not id="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!

answered Sep 23, 2013 at 12:24

Stephen James

1,2879 silver badges18 bronze badges

1 Comment

lost Over a year ago

yeah i wanna combine these two but even then it won't work.... :( how to do it..?

Collectives™ on Stack Overflow

validate name with jquery with some custom functions

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related