Form Validation using Jquery

Question

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Validation POC</title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
    $("#frm").validate({
        rules: {
            cname: {
                required: true
            },
            cemail: {
                required: true,
                email: true
            }
        },
        messages: {
            cname: "Please
    enter
    your
    name",
            cemail: {
                "Email
    is
    not
    validated"
            }
        }
    });
});
</script>
</head>
<body>
<form id="frm" action="" method="get">
 <fieldset>
   <legend>Validation POC</legend>
   <p>
     <label for="cname">Name</label>
     <em>*</em><input id="cname" name="name" size="25" />
   </p>
   <p>
     <label for="cemail">E-Mail</label>
     <em>*</em><input id="cemail" name="email"size="25"  />
   </p>
   <p>
     <input class="submit" type="submit" value="Submit"/>
   </p>
 </fieldset>
 </form>
</body>
</html>

I am trying to do form validation using jquery validation. I am trying to give my own error messages. But this code is not running.

When I tried

 <input type="text" id="cemail" class="required"></input>

the code is working fine, but with this , I am not able to give custom error messages. Please let me know if I am doing something wrong in upper code.
EDIT: I have another concern as well , if validation fails for any control, I want to change the background color of that control. And I also want to remove the default error message.

Nick Craver · Accepted Answer · 2010-09-15 09:25:07Z

1

There are 2 issues, mainly you need to use the name attribute (not the id attribute), so name and email, not cname and cemail for your rules. Also, the {} around the email error message needs removing. Overall you want to look like this:

$("#frm").validate({
    rules: {
        name: { required: true },
        email: { required: true, email: true }
    },
    messages: {
        name: "Please enter your name",
        email: "Email is not validated"
    }
});

You can give it a try here.

answered Sep 15, 2010 at 9:25

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

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

Comments

Māris Kiseļovs · Accepted Answer · 2010-09-15 07:40:01Z

1

cemail and cname should be added to input elements as class, not ID.

example:

<input class="cemail" name="email" size="25"  />

answered Sep 15, 2010 at 7:40

Māris Kiseļovs

17.3k5 gold badges43 silver badges50 bronze badges

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

format should be like this...

$(document).ready(function() {
    $("#frm").validate({

        rules: {
            cname: {
                required: true
            },
            cemail: {
                required: true,
                email: true
            }
        },
        messages: {
            cname: { 
                required: "Please enter your name"
            },
            cemail: {
                email: "Email is not validated"
            }
        }
    });
});

cname and cemail are the values of name attribute of the input.

demo

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Sep 15, 2010 at 8:22

Reigel Gallarde

65.5k21 gold badges126 silver badges142 bronze badges

Collectives™ on Stack Overflow

Form Validation using Jquery

3 Answers 3

Comments

Comments

demo

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related