Implementation of jquery form submission error message prompt function-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Implementation of jquery form submission error message prompt function

小云云

Jan 23, 2018 am 09:06 AM

This article mainly introduces examples of jquery form submission with error message prompt effect, which has a good reference value. Let's take a look at it with the editor. I hope it can help you better complete the jQuery form function.

Rendering:

html code:

    <form action="" method="" name="form2">
      <p class="m_t30 error_p2">
        <p>
          我是
          <select name="identity" id="ko" class="form-control">
<option></option>
<option value="investor">投资者</option>
<option value="developer">地产开发商</option>
          </select>
        </p>
        <p>
          <p class="error_p2"><i class="glyphicon glyphicon-info-sign"></i>注册错误信息</p>
        </p>
      </p>
      <p class="m_t10 error_p2">
        <p>
          <input type="text" class="form-control" name="name" placeholder="用户名">
        </p>
        <p>
          <p class="error_p2"><i class="glyphicon glyphicon-info-sign"></i>注册错误信息</p>
        </p>
      </p>
      <p class="m_t10 error_p2">
        <p>
          <input type="email" class="form-control" name="email" placeholder="电子邮箱">
        </p>
        <p>
          <p class="error_p2"><i class="glyphicon glyphicon-info-sign"></i>注册错误信息</p>
        </p>
      </p>
      <p class="m_t10 error_p2">
        <p>
          <input type="tel" class="form-control" name="phone" placeholder="手机">
        </p>
        <p>
          <p class="error_p2"><i class="glyphicon glyphicon-info-sign"></i>注册错误信息</p>
        </p>
      </p>
<p class="m_t10 error_p2">
        <p>
          <select name="country" class="form-control">
<option></option>
<option>国家或地区</option>
<option value="1">中国</option>
<option value="2">美国</option>
          </select>
        </p>
        <p>
          <p class="error_p2"><i class="glyphicon glyphicon-info-sign"></i>注册错误信息</p>
        </p>
      </p>
      <p class="m_t10 error_p2">
        <p>
          <select name="province" class="form-control">
<option></option>
<option>州/省</option>
<option value="1">广东</option>
<option value="2">加州</option>
          </select>
        </p>
        <p>
          <p class="error_p2"><i class="glyphicon glyphicon-info-sign"></i>注册错误信息</p>
        </p>
      </p>
      <p class="m_t10 error_p2">
        <p>
          <input type="password" class="form-control" name="pwd" placeholder="密码">
        </p>
        <p>
          <p class="error_p2"><i class="glyphicon glyphicon-info-sign"></i>注册错误信息</p>
        </p>
      </p>
      <p class="m_t10 error_p2">
        <p>
          <input type="password" class="form-control" name="pwd2" placeholder="再次确认密码">
        </p>
        <p>
          <p class="error_p2"><i class="glyphicon glyphicon-info-sign"></i>注册错误信息</p>
        </p>
      </p>
      <p class="m_t10">
        <p>
          <button class="btn btn_login" type="button" onclick="btn_register()">下一步</button>
        </p>
      </p>
    </form>

Copy after login

css code:

<style>
  .m_t10 {
    margin-top: 20px;
  }
  .error_p2 {
    background-color: #FF6900;
    color: white;
    font-size: 10px;
    padding: 5px;
    border-radius: 5px;
    display: none;
  }
  .error_p2 i {
    margin-right: 5px;
  }
</style>

Copy after login

js code

<!--注册错误判断form2-->
<script>
  //定义要提交的所有数据为一个数组validate2，并且全部赋值为false
  var validate2 = {
    identity: false,
    name: false,
    phone: false,
    email: false,
    country: false,
    province: false,
    mail: false,
    pwd: false,
    pwd2: false
  };
  var msg = ""; //定义提示信息
  //判断角色  
  $(&#39;select[name=identity]&#39;, form2).blur(function() {
    var identity = $(this).val();
    var span = $(this).parents(&#39;.error_p2&#39;).find(&#39;.error_p2&#39;);
    //判断用户名是否为空
    if(identity == &#39;&#39;) {
      msg = &#39;<i class="glyphicon glyphicon-exclamation-sign"></i>&#39; + "请输入您的身份";
      span.html(msg);
      span.css(&#39;display&#39;, &#39;inline&#39;);
      validate2.identity = false;
      return;
    } else {
      msg = "";
      span.css(&#39;display&#39;, &#39;none&#39;);
      validate2.identity = true;
      return;
    }
  })
  //      //判断用户名  
  $(&#39;input[name=name]&#39;, form2).blur(function() {
    var name = $(this).val();
    var span = $(this).parents(&#39;.error_p2&#39;).find(&#39;.error_p2&#39;);
    //判断用户名是否为空
    if(name == &#39;&#39;) {
      msg = &#39;<i class="glyphicon glyphicon-exclamation-sign"></i>&#39; + "请输入用户名";
      span.html(msg);
      span.css(&#39;display&#39;, &#39;inline&#39;);
      validate2.name = false;
      return;
    } else {
      msg = "";
      span.css(&#39;display&#39;, &#39;none&#39;);
      validate2.name = true;
      return;
    }
  })
  //判断手机
  $(&#39;input[name=phone]&#39;, form2).blur(function() {
    var phone = $(this).val();
    var span = $(this).parents(&#39;.error_p2&#39;).find(&#39;.error_p2&#39;);
    //判断用户名是否为空
    if(phone == &#39;&#39;) {
      msg = &#39;<i class="glyphicon glyphicon-exclamation-sign"></i>&#39; + "请输入手机号";
      span.html(msg);
      span.css(&#39;display&#39;, &#39;inline&#39;);
      validate2.phone = false;
      return;
    } else {
      msg = "";
      span.css(&#39;display&#39;, &#39;none&#39;);
      validate2.phone = true;
      return;
    }
  })
  //判断国家
  $(&#39;select[name=country]&#39;, form2).blur(function() {
    var country = $(this).val();
    var span = $(this).parents(&#39;.error_p2&#39;).find(&#39;.error_p2&#39;);
    //判断用户名是否为空
    if(country == &#39;&#39;) {
      msg = &#39;<i class="glyphicon glyphicon-exclamation-sign"></i>&#39; + "请输入国家";
      span.html(msg);
      span.css(&#39;display&#39;, &#39;inline&#39;);
      validate2.country = false;
      return;
    } else {
      msg = "";
      span.css(&#39;display&#39;, &#39;none&#39;);
      validate2.country = true;
      return;
    }
  })
  //判断省份
  $(&#39;select[name=province]&#39;, form2).blur(function() {
    var province = $(this).val();
    var span = $(this).parents(&#39;.error_p2&#39;).find(&#39;.error_p2&#39;);
    //判断用户名是否为空
    if(province == &#39;&#39;) {
      msg = &#39;<i class="glyphicon glyphicon-exclamation-sign"></i>&#39; + "请输入省或州";
      span.html(msg);
      span.css(&#39;display&#39;, &#39;inline&#39;);
      validate2.province = false;
      return;
    } else {
      msg = "";
      span.css(&#39;display&#39;, &#39;none&#39;);
      validate2.province = true;
      return;
    }
  })
  //判断邮政编码
  $(&#39;input[name=mail]&#39;, form2).blur(function() {
    var mail = $(this).val();
    var span = $(this).parents(&#39;.error_p2&#39;).find(&#39;.error_p2&#39;);
    //判断用户名是否为空
    if(mail == &#39;&#39;) {
      msg = &#39;<i class="glyphicon glyphicon-exclamation-sign"></i>&#39; + "请输邮政编码";
      span.html(msg);
      span.css(&#39;display&#39;, &#39;inline&#39;);
      validate2.mail = false;
      return;
    } else {
      msg = "";
      span.css(&#39;display&#39;, &#39;none&#39;);
      validate2.mail = true;
      return;
    }
  })
  //判断email
  $(&#39;input[name=email]&#39;, form2).blur(function() {
    var email = $(this).val();
    var reg = /\w+[@]{1}\w+[.]\w+/;
    var span = $(this).parents(&#39;.error_p2&#39;).find(&#39;.error_p2&#39;);
    if(email == &#39;&#39;) {
      msg = &#39;<i class="glyphicon glyphicon-exclamation-sign"></i>&#39; + "请填写邮箱";
      span.html(msg);
      span.css(&#39;display&#39;, &#39;inline&#39;);
      validate2.eamil = false;
      return;
    } else if(reg.test(email) == false) {
      msg = &#39;<i class="glyphicon glyphicon-exclamation-sign"></i>&#39; + "邮箱格式不正确";
      span.html(msg);
      span.css(&#39;display&#39;, &#39;inline&#39;);
      validate2.email = false;
      return;
    } else {
      msg = "";
      span.css(&#39;display&#39;, &#39;none&#39;);

      validate2.email = true;
      return;
    }
  })
  //判断密码  
  $(&#39;input[name=pwd]&#39;, form2).blur(function() {
    var pwd = $(this).val();
    var span = $(this).parents(&#39;.error_p2&#39;).find(&#39;.error_p2&#39;);
    //判断用户名是否为空
    if(pwd == &#39;&#39;) {
      msg = &#39;<i class="glyphicon glyphicon-exclamation-sign"></i>&#39; + "密码不能为空";
      span.html(msg);
      span.css(&#39;display&#39;, &#39;inline&#39;);
      validate2.pwd = false;
      return;
    } else {
      msg = "";
      span.css(&#39;display&#39;, &#39;none&#39;);
      validate2.pwd = true;
      return;
    }
  })
  //判断再次确认密码  
  $(&#39;input[name=pwd2]&#39;, form2).blur(function() {
    var pwd2 = $(this).val();
    var span = $(this).parents(&#39;.error_p2&#39;).find(&#39;.error_p2&#39;);
    //判断用户名是否为空
    if(pwd2 == &#39;&#39;) {
      msg = &#39;<i class="glyphicon glyphicon-exclamation-sign"></i>&#39; + "确认密码不能为空";
      span.html(msg);
      span.css(&#39;display&#39;, &#39;inline&#39;);
      validate2.pwd2 = false;
      return;
    } else if(pwd2 != $(&#39;input[name=pwd]&#39;, form2).val()) {
      msg = &#39;<i class="glyphicon glyphicon-exclamation-sign"></i>&#39; + "确认密码与密码不一致";
      span.html(msg);
      span.css(&#39;display&#39;, &#39;inline&#39;);
      validate2.pwd2 = false;
      return;
    } else {
      msg = "";
      span.css(&#39;display&#39;, &#39;none&#39;);
      validate2.pwd2 = true;
      return;
    }
  })
  //提交表单，isOK的值是所有提交信息的true，false判断，
  //只要有一个为false，isOK的值就是false，
  //isOK值为false的话就全部执行一次表单元素的失去焦点事件，从而提示错误信息
  //isOK值为true的话才提交表单。  
  //因为有些页面可能不止一个需要提交的表单或者有些表单元素的name重复，所以根据form name=".. "，来区分元素失去事件，这里是form2就是对应的<form name>
  function btn_register() {
    var isOK = validate2.identity && validate2.name && validate2.phone && validate2.email && validate2.mail && validate2.country && validate2.province && validate2.pwd && validate2.pwd2;
    var form2 = $(&#39;form[name=form2]&#39;);
    if(isOK) {
      //。。。执行提交事件
      form2.submit();
    } else {
      $(&#39;select[name=identity]&#39;, form2).trigger(&#39;blur&#39;);
      $(&#39;input[name=name]&#39;, form2).trigger(&#39;blur&#39;);
      $(&#39;input[name=phone]&#39;, form2).trigger(&#39;blur&#39;);
      $(&#39;input[name=email]&#39;, form2).trigger(&#39;blur&#39;);
      $(&#39;input[name=mail]&#39;, form2).trigger(&#39;blur&#39;);
      $(&#39;select[name=country]&#39;, form2).trigger(&#39;blur&#39;);
      $(&#39;select[name=province]&#39;, form2).trigger(&#39;blur&#39;);
      $(&#39;input[name=pwd]&#39;, form2).trigger(&#39;blur&#39;);
      $(&#39;input[name=pwd2]&#39;, form2).trigger(&#39;blur&#39;);
    }
  }
</script>

Copy after login

Brief description:

  //执行对应表单元素的失去焦点事件$(&#39;input[name=XX]&#39;,formX).blur()
  //定义对应的参数来获取值，如:var pwd=$(this).val();
  //定义参数获取对应错误提示信息的标签元素对象，这里的是var span = $(this).parents(&#39;.error_p2&#39;).find(&#39;.error_p2&#39;);
  //简要说明.parents(&#39;&#39;)方法获取的是祖先元素为（&#39;.error_p2&#39;），看清楚有带"s"，简单来说如果.error_p2是当前元素的上三级$(&#39;this&#39;).parent().parent().parent()，而用$(&#39;this&#39;).parents(&#39;.error_p2&#39;)能一步到位获取到该元素对象，而find(&#39;&#39;)方法刚好相反，一步到位的获取对应后辈元素对象
  //然后就是根据条件判断，判断的正则表达式我就不一 一举例了（因为我也记不住那么多= =、），是否符合返回对应的数组元素true、false值，实现隐藏错误提示，并且给数组validate2的值赋值。
  //最后提交表单时，再次执行判断isOK是否为true
  //isOK值为false的话就全部执行一次表单元素的失去焦点事件，从而提示错误信息
  //isOK值为true的话才提交表单。
  //ps:表单里的button元素如果不是提交按钮，记得将type=“button”，否则默认是type=“submit”，点击就会提交;

Copy after login

Last words:

The style and layout are not set up well, the page effect is not good, I am deeply sorry

As I said before, when writing jq, first think about which objects to obtain, what events to execute, and finally what element objects to achieve. Effectively, the parents and find methods are easy to use, but when using them, be sure to nest them well to achieve a holistic effect.

Related recommendations:

PHP coding error does not display error message prompt solution_PHP tutorial

Required form items

Realize beautiful dynamic information prompt effect based on jquery_jquery

The above is the detailed content of Implementation of jquery form submission error message prompt function. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Assassin's Creed Shadows: Seashell Riddle Solution

1 months ago By DDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues

3 weeks ago By DDD

Where to find the Crane Control Keycard in Atomfall

1 months ago By DDD

How to fix KB5055523 fails to install in Windows 11?

2 weeks ago By DDD

InZoi: How To Apply To School And University

3 weeks ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7774

Java Tutorial

1644

CakePHP Tutorial

1399

Laravel Tutorial

1296

PHP Tutorial

1234

Related knowledge

What functions does Doubao app have? Mar 01, 2024 pm 10:04 PM

There will be many AI creation functions in the Doubao app, so what functions does the Doubao app have? Users can use this software to create paintings, chat with AI, generate articles for users, help everyone search for songs, etc. This function introduction of the Doubao app can tell you the specific operation method. The specific content is below, so take a look! What functions does the Doubao app have? Answer: You can draw, chat, write articles, and find songs. Function introduction: 1. Question query: You can use AI to find answers to questions faster, and you can ask any kind of questions. 2. Picture generation: AI can be used to create different pictures for everyone. You only need to tell everyone the general requirements. 3. AI chat: can create an AI that can chat for users,

The difference between vivox100s and x100: performance comparison and function analysis Mar 23, 2024 pm 10:27 PM

Both vivox100s and x100 mobile phones are representative models in vivo's mobile phone product line. They respectively represent vivo's high-end technology level in different time periods. Therefore, the two mobile phones have certain differences in design, performance and functions. This article will conduct a detailed comparison between these two mobile phones in terms of performance comparison and function analysis to help consumers better choose the mobile phone that suits them. First, let’s look at the performance comparison between vivox100s and x100. vivox100s is equipped with the latest

What exactly is self-media? What are its main features and functions? Mar 21, 2024 pm 08:21 PM

With the rapid development of the Internet, the concept of self-media has become deeply rooted in people's hearts. So, what exactly is self-media? What are its main features and functions? Next, we will explore these issues one by one. 1. What exactly is self-media? We-media, as the name suggests, means you are the media. It refers to an information carrier through which individuals or teams can independently create, edit, publish and disseminate content through the Internet platform. Different from traditional media, such as newspapers, television, radio, etc., self-media is more interactive and personalized, allowing everyone to become a producer and disseminator of information. 2. What are the main features and functions of self-media? 1. Low threshold: The rise of self-media has lowered the threshold for entering the media industry. Cumbersome equipment and professional teams are no longer needed.

What are the functions of Xiaohongshu account management software? How to operate a Xiaohongshu account? Mar 21, 2024 pm 04:16 PM

As Xiaohongshu becomes popular among young people, more and more people are beginning to use this platform to share various aspects of their experiences and life insights. How to effectively manage multiple Xiaohongshu accounts has become a key issue. In this article, we will discuss some of the features of Xiaohongshu account management software and explore how to better manage your Xiaohongshu account. As social media grows, many people find themselves needing to manage multiple social accounts. This is also a challenge for Xiaohongshu users. Some Xiaohongshu account management software can help users manage multiple accounts more easily, including automatic content publishing, scheduled publishing, data analysis and other functions. Through these tools, users can manage their accounts more efficiently and increase their account exposure and attention. In addition, Xiaohongshu account management software has

PHP Tips: Quickly Implement Return to Previous Page Function Mar 09, 2024 am 08:21 AM

PHP Tips: Quickly implement the function of returning to the previous page. In web development, we often encounter the need to implement the function of returning to the previous page. Such operations can improve the user experience and make it easier for users to navigate between web pages. In PHP, we can achieve this function through some simple code. This article will introduce how to quickly implement the function of returning to the previous page and provide specific PHP code examples. In PHP, we can use $_SERVER['HTTP_REFERER'] to get the URL of the previous page

What is Discuz? Definition and function introduction of Discuz Mar 03, 2024 am 10:33 AM

"Exploring Discuz: Definition, Functions and Code Examples" With the rapid development of the Internet, community forums have become an important platform for people to obtain information and exchange opinions. Among the many community forum systems, Discuz, as a well-known open source forum software in China, is favored by the majority of website developers and administrators. So, what is Discuz? What functions does it have, and how can it help our website? This article will introduce Discuz in detail and attach specific code examples to help readers learn more about it.

Detailed explanation of the functions and functions of GDM under Linux Mar 01, 2024 pm 04:18 PM

Detailed explanation of the functions and functions of GDM under Linux In the Linux operating system, GDM (GNOMEDisplayManager) is a graphical login manager that provides an interface for users to log in and log out of the system. GDM is usually part of the GNOME desktop environment, but can be used by other desktop environments as well. The role of GDM is not only to provide a login interface, but also includes user session management, screen saver, automatic login and other functions. The functions of GDM mainly include the following aspects:

What is PHP used for? Explore the role and functions of PHP Mar 24, 2024 am 11:39 AM

PHP is a server-side scripting language widely used in web development. Its main function is to generate dynamic web content. When combined with HTML, it can create rich and colorful web pages. PHP is powerful. It can perform various database operations, file operations, form processing and other tasks, providing powerful interactivity and functionality for websites. In the following articles, we will further explore the role and functions of PHP, with detailed code examples. First, let’s take a look at a common use of PHP: dynamic web page generation: P

See all articles