Jquery validate вывод ошибок

• Приступаем к работе
• Валидация первой формы
• Опции validate() метода
• Добавление правил валидации для полей ввода
• Создание собственных сообщений об ошибках
• Кастомизация сообщений об ошибках
• Дополнительные опции настройки плагина
• Формы jQuery, доступные на CodeCanyon
  • Конструктор пошаговых jQuery форм Timon Step Form
  • Smart Forms
  • Just Forms Advanced
  • Forms Plus JS
  • Sky Forms
• Заключение

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>

<form id="basic-form" action="" method="post">
<p>
<label for="name">Name <span>(required, at least 3 characters)</span></label>
<input id="name" name="name" minlength="3" type="text" required>
</p>
<p>
<label for="email">E-Mail <span>(required)</span></label>
<input id="email" type="email" name="email" required>
</p>
<p>
<input class="submit" type="submit" value="SUBMIT">
</p>
</form>

$(document).ready(function() {
$("#basic-form").validate();
});

$(document).ready(function() {
$("#basic-form").validate({
rules: {
name : {
required: true,
minlength: 3
},
age: {
required: true,
number: true,
min: 18
},
email: {
required: true,
email: true
},
weight: {
required: {
depends: function(elem) {
return $("#age").val() > 50
}
},
number: true,
min: 0
}
}
});
});

messages : {
name: {
minlength: "Name should be at least 3 characters"
},
age: {
required: "Please enter your age",
number: "Please enter your age as a numerical value",
min: "You must be at least 18 years old"
},
email: {
email: "The email should be in the format: abc@domain.tld"
},
weight: {
required: "People with age over 50 have to enter their weight",
number: "Please enter your weight as a numerical value"
}
}

$(document).ready(function() {
$("#basic-form").validate({
errorClass: "error fail-alert",
validClass: "valid success-alert",
// ... More validation code from previous example
Далее приведен CSS -код, который мы будем использовать для оформления сообщений об ошибках:
label.error.fail-alert {
border: 2px solid red;
border-radius: 4px;
line-height: 1;
padding: 2px 0 6px 6px;
background: #ffe6eb;
}
input.valid.success-alert {
border: 2px solid #4CAF50;
color: green;
}

<form>
	<input required>
</form>
<script src="jquery.js"></script>
<script src="jquery.validate.js"></script>
<script>
    $("form").validate();
</script>

define(["jquery", "jquery.validate"], function( $ ) {
	$("form").validate();
});

$("#myForm").validate({
	rules: {
		username: {
			required: true,
			// Using the normalizer to trim the value of the element
			// before validating it.
			//
			// The value of `this` inside the `normalizer` is the corresponding
			// DOMElement. In this example, `this` references the `username` element.
			normalizer: function(value) {
				return $.trim(value);
			}
		}
	}
});

$("#myform").validate({
  errorElement: "span"
});

<label for="name">Name</label>
<input id="name" aria-describedby="unique-id-here">
<span class="error" id="unique-id-here">This field is required</span>

Description: Validates the selected form.

• validate( [options ] )

  • options

    • debug (default: false)

      Enables debug mode. If true, the form is not submitted and certain errors are displayed on the console (will check if a window.console property exists). Try to enable when a form is just submitted instead of validation stopping the submit.

      Example: Prevents the form from submitting and tries to help setting up the validation with warnings about missing methods and other debug messages.

    • submitHandler (default: native form submit)

      Callback for handling the actual submit when the form is valid. Gets the form and the submit event as the only arguments. Replaces the default submit. The right place to submit a form via Ajax after it is validated.

      Example: Submits the form via Ajax, using jQuery Form plugin, when valid.

      1 2 3 4 5

      submitHandler: function(form) {

      Example: Use submitHandler to process something and then using the default submit. Note that «form» refers to a DOM element, this way the validation isn’t triggered again.

      1 2 3 4 5 6

      submitHandler: function(form) { // do other things for a valid form

      The callback gets passed two arguments:

      • form

        The form currently being validated, as a DOMElement.

      • event

        The submit event instance.

    • invalidHandler

      Callback for custom code when an invalid form is submitted. Called with an event object as the first argument, and the validator as the second.

      Example: Displays a message above the form, indicating how many fields are invalid when the user tries to submit an invalid form.

      1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

      invalidHandler: function(event, validator) { // 'this' refers to the form var errors = validator.numberOfInvalids(); var message = errors == 1 ? 'You missed 1 field. It has been highlighted' : 'You missed ' + errors + ' fields. They have been highlighted'; $("div.error span").html(message);

      The callback gets passed two arguments:

      • event

        A custom event object, since this function is bound as an event handler.

      • validator

        The validator instance for the current form.

    • ignore (default: ":hidden")

      Elements to ignore when validating, simply filtering them out. jQuery’s not-method is used, therefore everything that is accepted by not() can be passed as this option. Inputs of type submit and reset are always ignored, so are disabled elements.

      Example: Ignores all elements with the class «ignore» when validating.

    • rules (default: rules are read from markup (classes, attributes, data))

      Key/value pairs defining custom rules. Key is the name of an element (or a group of checkboxes/radio buttons), value is an object consisting of rule/parameter pairs or a plain String. Can be combined with class/attribute/data rules. Each rule can be specified as having a depends-property to apply the rule only in certain conditions. See the second example below for details.

      Example: Specifies a name element as required and an email element as required (using the shortcut for a single rule) and a valid email address (using another object literal).

      1 2 3 4 5 6 7 8 9 10 11

      // simple rule, converted to {required:true}

      Example: Specifies a contact element as required and as email address, the latter depending on a checkbox being checked for contact via email.

      1 2 3 4 5 6 7 8 9 10 11 12

      depends: function(element) { return $("#contactform_email").is(":checked");

      Example: Configure a rule that requires a parameter, along with a depends callback.

      1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

      // at least 15€ when bonus material is included // min needs a parameter passed to it depends: function(element) { return $("#bonus-material").is(":checked");

    • messages (default: the default message for the method used)

      Key/value pairs defining custom messages. Key is the name of an element, value the message to display for that element. Instead of a plain message, another map with specific messages for each rule can be used. Overrides the title attribute of an element or the default message for the method (in that order). Each message can be a String or a Callback. The callback is called in the scope of the validator, with the rule’s parameters as the first argument and the element as the second, and must return a String to display as the message.

      Example: Specifies a name element as required and an email element as required and a valid email address. A single message is specified for the name element, and two messages for email.

      1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

      name: "Please specify your name", required: "We need your email address to contact you",

      Example: Validates the name-field as required and having at least two characters. Provides a callback message using jQuery.validator.format to avoid having to specify the parameter in two places.

      1 2 3 4 5 6 7 8 9 10 11 12 13 14

      required: "We need your email address to contact you", minlength: jQuery.validator.format("At least {0} characters required!")

    • groups

      Specify grouping of error messages. A group consists of an arbitrary group name as the key and a space separated list of element names as the value. Use errorPlacement to control where the group message is placed.

      Example: Use a table layout for the form, placing error messags in the next cell after the input.

      1 2 3 4 5 6 7 8 9 10 11 12

      errorPlacement: function(error, element) { if (element.attr("name") == "fname" || element.attr("name") == "lname" ) { error.insertAfter("#lastname"); error.insertAfter(element);

    • normalizer

      Prepares/transforms the elements value for validation.
      See normalizer docs for more details.

    • onsubmit (default: true)

      Validate the form on submit. Set to false to use only other events for validation.

      Example: Disables onsubmit validation, allowing the user to submit whatever he wants, while still validating on keyup/blur/click events (if not specified otherwise).

    • onfocusout

      Validate elements (except checkboxes/radio buttons) on blur. If nothing is entered, all rules are skipped, except when the field was already marked as invalid.

      Set to a Function to decide for yourself when to run validation.

      A boolean true is not a valid value.

      Example: Disables focusout validation.

      The callback gets passed two arguments:

      • element

        The element currently being validated, as a DOMElement.

      • event

        The event object for this focusout event.

    • onkeyup

      Validate elements on keyup. As long as the field is not marked as invalid, nothing happens. Otherwise, all rules are checked on each key up event. Set to false to disable.

      Set to a Function to decide for yourself when to run validation.

      A boolean true is not a valid value.

      Example: Disables onkeyup validation.

      The callback gets passed two arguments:

      • element

        The element currently being validated, as a DOMElement.

      • event

        The event object for this keyup event.

    • onclick

      Validate checkboxes, radio buttons, and select elements on click. Set to false to disable.

      Set to a Function to decide for yourself when to run validation.

      A boolean true is not a valid value.

      Example: Disables onclick validation of checkboxes, radio buttons, and select elements.

      The callback gets passed two arguments:

      • element

        The element currently being validated, as a DOMElement.

      • event

        The event object for this click event.

    • focusInvalid (default: true)

      Focus the last active or first invalid element on submit via validator.focusInvalid(). The last active element is the one that had focus when the form was submitted, avoiding stealing its focus. If there was no element focused, the first one in the form gets it, unless this option is turned off.

      Example: Disables focusing of invalid elements.

    • focusCleanup (default: false)

      If enabled, removes the errorClass from the invalid elements and hides all error messages whenever the element is focused. Avoid combination with focusInvalid.

      Example: Enables cleanup when focusing elements, removing the error class and hiding error messages when an element is focused.

    • errorClass (default: "error")

      Use this class to create error labels, to look for existing error labels and to add it to invalid elements.

      Example: Sets the error class to «invalid».

    • validClass (default: "valid")

      This class is added to an element after it was validated and considered valid.

      Example: Sets the valid class to «success».

    • errorElement (default: "label")

      Use this element type to create error messages and to look for existing error messages. The default, «label», has the advantage of creating a meaningful link between error message and invalid field using the for attribute (which is always used, regardless of element type).

      Example: Sets the error element to «em».

    • wrapper (default: window)

      Wrap error labels with the specified element. Useful in combination with errorLabelContainer to create a list of error messages.

      Example: Wrap each error element with a list item, useful when using an ordered or unordered list as the error container.

    • errorLabelContainer

      Hide and show this container when validating.

      Example: All error labels are displayed inside an unordered list with the ID «messageBox», as specified by the selector passed as errorContainer option. All error elements are wrapped inside a li element, to create a list of messages.

      1 2 3 4 5

      errorLabelContainer: "#messageBox", submitHandler: function() { alert("Submitted!") }

    • errorContainer

      Hide and show this container when validating.

      Example: Uses an additonal container for error messages. The elements given as the errorContainer are all shown and hidden when errors occur. However, the error labels themselves are added to the element(s) given as errorLabelContainer, here an unordered list. Therefore the error labels are also wrapped into li elements (wrapper option).

      1 2 3 4 5 6

      errorContainer: "#messageBox1, #messageBox2", errorLabelContainer: "#messageBox1 ul", wrapper: "li", debug:true, submitHandler: function() { alert("Submitted!") }

    • showErrors

      A custom message display handler. Gets the map of errors as the first argument and an array of errors as the second, called in the context of the validator object. The arguments contain only those elements currently validated, which can be a single element when doing validation on focusout or keyup. You can trigger (in addition to your own messages) the default behaviour by calling this.defaultShowErrors().

      Example: Update the number of invalid elements each time an error is displayed. Delegates to the default implementation for the actual error display.

      1 2 3 4 5 6 7 8

      showErrors: function(errorMap, errorList) { $("#summary").html("Your form contains " + this.numberOfInvalids() + " errors, see details below."); this.defaultShowErrors();

      The callback gets passed two arguments:

      • errorMap

        Key/value pairs, where the key refers to the name of an input field, values the message to be displayed for that input.

      • errorList

        An array for all currently validated elements. Contains objects with the following two properties:

        • message

          The message to be displayed for an input.

        • element

          The DOMElement for this entry.

    • errorPlacement (default: Places the error label after the invalid element)

      Customize placement of created error labels. First argument: The created error label as a jQuery object. Second argument: The invalid element as a jQuery object.

      Example: Use a table layout for the form, placing error messages in the next cell after the input.

      1 2 3 4 5

      errorPlacement: function(error, element) { error.appendTo( element.parent("td").next("td") );

      The callback gets passed two arguments:

      • error

        The error label to insert into the DOM.

      • element

        The validated input, for relative positioning.

    • success

      If specified, the error label is displayed to show a valid element. If a String is given, it is added as a class to the label. If a Function is given, it is called with the label (as a jQuery object) and the validated input (as a DOM element). The label can be used to add a text like «ok!».

      Example: Add a class «valid» to valid elements, styled via CSS.

      1 2 3 4

      submitHandler: function() { alert("Submitted!") }

      Example: Add a class «valid» to valid elements, styled via CSS, and add the text «Ok!».

      1 2 3 4 5 6

      success: function(label) { label.addClass("valid").text("Ok!") submitHandler: function() { alert("Submitted!") }

      The callback gets passed two arguments:

      • label

        The error label. Use to add a class or replace the text content.

      • element

        The element currently being validated, as a DOMElement.

    • highlight (default: Adds errorClass (see the option) to the element)

      How to highlight invalid fields. Override to decide which fields and how to highlight.

      Example: Highlights an invalid element by fading it out and in again.

      1 2 3 4 5 6 7

      highlight: function(element, errorClass) { $(element).fadeOut(function() {

      Example: Adds the error class to both the invalid element and its label

      1 2 3 4 5 6 7 8 9 10 11 12

      highlight: function(element, errorClass, validClass) { $(element).addClass(errorClass).removeClass(validClass); $(element.form).find("label[for=" + element.id + "]") unhighlight: function(element, errorClass, validClass) { $(element).removeClass(errorClass).addClass(validClass); $(element.form).find("label[for=" + element.id + "]") .removeClass(errorClass);

      The callback gets passed three arguments:

      • element

        The invalid DOM element, usually an input.

      • errorClass

        Current value of the errorClass option.

      • validClass

        Current value of the validClass option.

    • unhighlight (default: Removes the errorClass)

      Called to revert changes made by option highlight, same arguments as highlight.

    • ignoreTitle (default: false)

      Set to skip reading messages from the title attribute, helps to avoid issues with Google Toolbar; default is false for compability, the message-from-title is likely to be completely removed in a future release.

      Example: Configure the plugin to ignore title attributes on validated elements when looking for messages.

Improve Article

Save Article

Form validation is a process of confirming the relevant information entered by the user in the input field. Here we will be validating a simple form that consists of a username, password and a confirmed password using jQuery.

Prerequisites: You must be aware of the basics of HTML, CSS, JavaScript, and jQuery.

Approach:

1. First, you need to create an index.html file consisting of an HTML form with username, email, password, and confirm password as input fields. We will use Bootstrap 4 to use Bootstrap’s form controls. At the bottom of the <body> tag, include the “app.js” file having jQuery code for form validation.
2. Create an app.js file that validates the whole form as given below in the code.
3. In the app.js file, when the document is ready, hide all the error messages. Perform the validation task for all the input fields such as username, email, password, and confirm password.

index.html: The following HTML code demonstrates the form design for user input.

app.js: The following jQuery code for validation is used in the above HTML file.

Output: 

Below is the output generated when the user directly hits the submit button.

Below is the output generated when the user enters invalid details in the form.

Validation using inbuilt jQuery validation plugin

In this part, you get to know about the inbuilt validation method of jQuery. Create an index.html file and copy the following code:

Example 1 : 

Note: Run the above code by creating a .html file using a text editor.

Output:

If we do not fill the email section:

If we do not fill the comment section:

Example 2 : (Important)

The jQuery plugin makes simpler the code of validation for the clientside.

The plugin comes bundled with a useful set of validation methods, including URL and email validation while providing an API to write your own methods. 

Follow the below example which makes more clarifications regarding it.

Note: Run the above code by creating a .html file using a text editor.

Output:

jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous for its philosophy of “Write less, do more”. 
You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.