jquery prompts input error

In website design, forms are one of the common elements. The form user fills in the information that needs to be submitted, and then the website checks the validity of the data through form verification. In forms, in order to increase user experience, jQuery plug-ins are often used to provide some tips and feedback. Among them, a common plug-in is the input error prompt.

Input error prompts allow users to know which data is illegal before submitting the form, thereby saving users time and reducing errors. Below is an example that demonstrates how to implement an input error prompt.

First, create a simple HTML form. The form contains three fields, name, email, and password.

<form id="signup-form">
  <div class="form-group">
    <label for="name">姓名</label>
    <input type="text" class="form-control" id="name" placeholder="请输入您的姓名">
  </div>
  <div class="form-group">
    <label for="email">电子邮件</label>
    <input type="email" class="form-control" id="email" placeholder="请输入您的电子邮件">
  </div>
  <div class="form-group">
    <label for="password">密码</label>
    <input type="password" class="form-control" id="password" placeholder="请输入密码">
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

Next, we use the jQuery plug-in to prompt input errors. Using jQuery's validate plugin, you can dynamically check a form before the user submits it based on the rules for the form fields (such as required fields or email formats). If the field does not comply with the rules, an input error will be prompted. The following is an example to implement this function:

$(document).ready(function(){
  $("#signup-form").validate({
    rules: {
      name: {
        required: true
      },
      email: {
        required: true,
        email: true
      },
      password: {
        required: true,
        minlength: 6
      }
    },
    messages: {
      name: {
        required: "姓名不能为空"
      },
      email: {
        required: "电子邮件不能为空",
        email: "电子邮件格式不正确"
      },
      password: {
        required: "密码不能为空",
        minlength: "密码至少需要6个字符"
      }
    },
    errorElement: "div",
    errorPlacement: function(error, element) {
      error.addClass("invalid-feedback");
      element.closest(".form-group").append(error);
    },
    highlight: function(element, errorClass, validClass) {
      $(element).addClass("is-invalid").removeClass("is-valid");
    },
    unhighlight: function(element, errorClass, validClass) {
      $(element).removeClass("is-invalid").addClass("is-valid");
    }
  });
});

In the above example, the validate plug-in is used when the page is loaded through the $(document).ready() method. The rules object specifies the rules, and the messages object specifies the error message. In error messages, you can use the special character "$" symbol to reference the name of a form field. The

errorElement option will use a div element to render the error message. The errorPlacement option inserts an error message into the form-group class associated with the input field. The highlight and unhighlight options are triggered when the input box is focused and out of focus respectively. These two methods set the border color to red and green to better highlight the error fields.

Finally, the validate plugin will perform validation when the user submits the form. If the field does not comply with the rules, an error message appears. These messages are displayed on a per corresponding field basis below the submit button.

The above is an example of an input error prompt. Using jQuery and this plug-in can help designers implement basic verification of forms and prompt users to understand which data is illegal before submitting the form.

The above is the detailed content of jquery prompts input error. For more information, please follow other related articles on the PHP Chinese website!