All geek questions in one place

JQuery and validate plugin

Instead of writing my own validation, I thought I would use jQuery, but I also don't find it easy. I have a few questions that I hope someone can answer. First, error messages only appear when you click the submit button. How can I make them appear after exiting each field? Here is my code to check.

code:

$(document).ready(function(){
    $("#orderForm").validate({
        rules: {
            shipFirstName: {
                required: true,
            },
            shipFamilyName: {
                required: true,
            },
            shipPhoneNumber: {
                required: true,
            },
            shipStreetName: {
                required: true,
            },
            shipCity: {
                required: true,
            },
            billEmailAddress: {
                required: true,
            },
            billPhoneNumber: {
                required: true,
            },
            billCardNumber: {
                required: true,
            },
            billCardType: {
                required: true,
            },
        }, //end of rules
    }); // end of validate
    }); //end of function

This is my HTML code for the form. I will not show the style, but I changed it to display a red font.

code:

<form id="orderForm" method="post" action="x">
      <table id="formTable" cellpadding="5">
        <tr>
          <td>
            <h3>Shipping and Billing Information</h3>
          </td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td><label for="shipFirstname">First Name</label></td>
          <td><input id="shipFirstName" type="text" name="shipFirstName" maxlength=
          "30" /></td>
        </tr>
        <tr>
          <td><label for="shipFamilyName">Surname</label></td>
          <td><input id="shipFamilyName" type="text" name="shipFamilyName" maxlength="30" /></td>
        </tr>
        <tr>
          <td><label for="shipPhoneNumber">Contact Telephone Number</label></td>
          <td><input id="shipPhoneNumber" type="text" name="shipPhoneNumber" maxlength="30" /></td>
        </tr>
        <tr>
          <td><label for="shipStreetName">Street Name</label></td>
          <td><input id="shipStreetName" type="text" name="shipStreetName" maxlength="30" /></td>
        </tr>
        <tr>
          <td><label for="shipCity">City</label></td>
          <td><input id="shipCity" type="text" name="shipCity" maxlength="30" /></td>
        </tr>
        <tr>
          <td><label for="shipPostalCode">Postal Code</label></td>
          <td><input id="shipPostalCode" type="text" name="shipPostalCode" maxlength="30" /></td>
        </tr>
        <tr>
          <td><label for="billEmailAddress">Email address</label></td>
          <td><input id="billEmailAddress" type="text" name="billEmailAddress" maxlength="30" /></td>
        </tr>
        <tr>
          <td><label for="billPhoneNumber">Contact Telephone Number</label></td>
          <td><input id="billPhoneNumber" type="text" name="billPhoneNumber" maxlength="30" /></td>
        </tr>
        <tr>
          <td><label for="fidelityCardNumber">Fidelity card</label></td>
          <td><input id="fidelityCardNumber" type="text" name="fidelityCardNumber" maxlength="30" /></td>
        </tr>
        <tr>
          <td><label for="billCardNumber">Credit Card Number</label></td>
          <td><input id="billCardNumber" type="text" name="billCardNumber" maxlength="30" /></td>
        </tr>
        <tr>
          <td><label for="billCardType">Credit Card Type</label></td>
          <td><select id="billCardType" name="billCardType">
            <option value="...">
              Choose your card...
            </option>
            <option value="visa">
              Visa
            </option>
            <option value="mastercard">
              Mastercard
            </option>
          </select></td>
        </tr>
        <tr>
          <td><label for="instructions">Instructions</label></td>
          <td>
          <textarea id="instructions" name="instructions" rows="8" cols="30">
Enter your requirements here or comments.
</textarea></td>
        </tr>
        <tr>
          <td colspan="2"><input id="submit" type="submit" name="Submit" value="Submit" </td>
        </tr>
      </table>
    </form>

I also want to use regular expressions for zip code and fidelity. How to include them in a script? It is right? Where can I say?

$.validator.addMethod('shipPostalCode', function (value) {
    return /^[A-Z]{2}\d{1,2}\s\d{1,2}[A-Z]{2}$/.test(value);
    }, 'Please enter a valid Postal Code');
    $.validator.addMethod('fidelityCardNumber', function (value) {
    return /^[A-Z]{1}([A-Z]|\d){4}\s?([A-Z]|\d){5}\s?([A-Z]|\d){3}\d{1}(\!|\&|\@|\?){1}$/.test(value);
    }, 'Please enter a valid card number');

One last thing. Can this script fit easily into an external js file? I am trying to get as much as possible from an html file.

thanks

+3
6

$().ready(() {       $ ( "# " ). ({           onfocusout: true,           : {                   shipFirstName: {                           : true,                   },                   shipFamilyName: {                           : true,                   },                   shipPhoneNumber: {                           : true,                   },                   shipStreetName: {                           : true,                   },                   shipCity: {                           : true,                   },                   billEmailAddress: {                           : true,                   },                   billPhoneNumber: {                           : true,                   },                   billCardNumber: {                           : true,                   },                   billCardType: {                           : true,                   },           },//       });//       });//

, , , .:)

+2

, - . - , .

+1

, http://docs.jquery.com/Plugins/Validation/Validator/addMethod#namemethodmessage

:

jQuery.validator.addClassRules({
  name: {
    required: true,
    minlength: 2
  },
  zip: {
    required: true,
    digits: true,
    minlength: 5,
    maxlength: 5
  }
});

http://docs.jquery.com/Plugins/Validation/Validator/addClassRules#rules

http://docs.jquery.com/Plugins/Validation ,

JS .

+1

"addMethod", "" , .

$.validator.addMethod('postalCode', 
    function (value, element) 
    {
          return this.optional(element) || /^[A-Z]{2}\d{1,2}\s\d{1,2}[A-Z]{2}$/.test(value);
    }, 'Please enter a valid Postal Code');


$.validator.addMethod('creditCardNumber', 
    function(value, element) 
    {
        return this.optional(element) || /^[A-Z]{1}([A-Z]|\d){4}\s?([A-Z]|\d){5}\s?([A-Z]|\d){3}\d{1}(\!|\&|\@|\?){1}$/.test(value);
    }, 'Please enter a valid card number');

JS , .

:

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

        rules: {

                    //Your other rules

                    shipPostalCode: { postalCode: true },
                    fidelityCardNumber : { creditCardNumber : true }

                }

    })
   }
 );
+1
$('#myform').validate({ onfocusout: function(element) { $(element).valid(); } };

.

0
jQuery.validator.addMethod("stateUS", function(value, element) {
    return this.optional(element) ||
    /^(?:A[KLRZ]|C[AOT]|D[CE]|FL|GA|HI|I[ADLN]|K[SY]|LA|M[ADEINOST]|N[CDEHJMVY]|O[HKR]|PA|RI|S[CD]|T[NX]|UT|V[AT]|W[AIVY])*$/.test(value);
}, "The specified US State is invalid");`

DC.

, - Salty answer ,

onfocusout: true

, ( ), . http://jqueryvalidation.org/validate

true .

, , , - , .

0

Source: https://habr.com/ru/post/1712687/

More articles:


All Articles