simple jquery validation creating error message

Question

sorry for opening what might be a basic question for a more seasoned jquery user but I am learning - I am currently on form validation and want to move on to a little bit more advanced methods, Im working with a tutorial and I like the tutorial it is just that they lack a bit of explanation hench me turning here:

Ok we have a basic form

Form submitted with errors

Code

<form method="post" name="productform" id="productform" >
    <p>
        <label for='prodid'>Product ID: (maxlength 10)</label><br>
        <input type="text" name="prodid" >
    </p>
    <p>
        <label for='email'>Email: (minlength 10)</label><br>
        <input type="text" name="email" >
    </p>
    <p>
        <label for='address'>Address( length between 10 and 250)</label><br>
        <input type="text" name="address">
    </p>    
    <p>
        <label for='message'>Message:( length between 50 and 1050)</label> <br>
        <textarea name="message"></textarea>
    </p>

    <input type="submit" name='submit' value="Post it !">
</form>

JQUERY

$(function()
{
    $("#productform").validate(
      {
        rules: 
        {
          prodid: 
          {
            required: true,
            maxlength: 10
          },
          email: 
          {
            required: true,
            email: true,
            minlength:10
          },
          address:
          {
            required: true,
            rangelength:[10,250]
          },
          message: 
          {
            rangelength:[50,1050]
          }
        }
      });   
});

CSS

body
{
  font-family: Arial, Sans-serif;
}
.error
{
color:red;
font-family:verdana, Helvetica;
}

My Question

When the form is submitted with errors the red error message is displayed next to the textbox? I fail to see in the Jquery code where the error message is created....I would understand if you have a span element or similar next to the textbox and then append the error to that element I fail to see where it happens in code above...

Im sure Im missing something simple or basic here...but I cant move on until I grasped this so it is rather frustrating.

the validate plugin is being used. jqueryvalidation.org — ᔕᖺᘎᕊ
– ᔕᖺᘎᕊ, Commented Aug 21, 2015 at 11:36

cнŝdk · Accepted Answer · 2015-08-21 11:50:02Z

2

The jQuery validation plugin is used here, so error messages are automatically handled by this plugin.

It means that you don't need to use a span or another element to wrap error messages, this is handled by the plugin.

And in the given jquery function, the validtaion rules are specified so the form will be validateddepending on these rules.

And this CSS is used to style those messages:

.error {
    color:red;
    font-family:verdana, Helvetica;
}

answered Aug 21, 2015 at 11:50

cнŝdk

32.2k7 gold badges62 silver badges81 bronze badges

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

Comments

ssilas777 · Accepted Answer · 2015-08-21 11:43:44Z

2

As you can see in the code, they have used Jquery validate plugin.

Since rule is given as required: true for these three fields this error is coming.

$("#productform").validate(
      {
        rules: 
        {
          prodid: 
          {
            required: true,
            maxlength: 10
          },
          email: 
          {
            required: true,
            email: true,
            minlength:10
          },
          address:
          {
            required: true,
            rangelength:[10,250]
          },

answered Aug 21, 2015 at 11:43

ssilas777

9,7704 gold badges48 silver badges70 bronze badges

Collectives™ on Stack Overflow

simple jquery validation creating error message

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related