jQuery: Using Validation Query

Question

I am looking at the following source in the jQuery Documentation. You can see where it says field: do I set it to the specific field like this field:('#fieldname');

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<script type="text/javascript">
jQuery.validator.setDefaults({
    debug: true,
    success: "valid"
});;
</script>

  <script>
  $(document).ready(function(){
    $("#myform").validate({
  rules: {
    field: {
      required: true,
      url: true
    }
  }
});
  });
  </script>
  <style>#field { margin-left: .5em; float: left; }
    #field, label { float: left; font-family: Arial, Helvetica, sans-serif; font-size: small; }
    br { clear: both; }
    input { border: 1px solid black; margin-bottom: .5em;  }
    input.error { border: 1px solid red; }
    label.error {
        background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/unchecked.gif') no-repeat;
        padding-left: 16px;
        margin-left: .3em;
    }
    label.valid {
        background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.gif') no-repeat;
        display: block;
        width: 16px;
        height: 16px;
    }
</style>
</head>
<body>

<form id="myform">
  <label for="field">Required, URL: </label>
  <input class="left" id="field" name="field" />
  <br/>
  <input type="submit" value="Validate!" />
</form>

</body>
</html>

From the source of this demo at jquery.bassistance.de/validate/demo it looks like you just set field: to whateverthefieldnameis: — aupdo
– aupdo, Commented Apr 12, 2012 at 19:24

Erikk Ross · Accepted Answer · 2012-04-12 20:18:57Z

1

The field is a reference to the name of the page element that you want to validate. In your case, the name of the page element that you are validating is called "field":

<input class="left" id="field" name="field" />

If it had a different name then you would use that name in your code.

For example if you had another form field named first_name:

<input class="left" id="first_name" name="first_name" />

The jQuery code to validate both the "field" and "first_name" text boxes would be this:

<script>
  $(document).ready(function(){
    $("#myform").validate({
      rules: {
       field: {
         required: true,
         url: true
       }, 
       first_name: {
         required: true
       }
     }
   });
  });
 </script>

answered Apr 12, 2012 at 20:18

Erikk Ross

2,18314 silver badges18 bronze badges

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

1 Comment

Erikk Ross Over a year ago

You should be able to test the form by opening it in your web browser, then leave the form blank and hit the submit button. You'll see a message popup next to the field that says "This field is required". I've copied and pasted your code into a new file. Leave the field blank and hit submit: jsbin.com/omimit

Collectives™ on Stack Overflow

jQuery: Using Validation Query

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related