开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

在jquery blur ajax中停止表单提交以显示错误

在jQuery中，blur事件是在元素失去焦点时触发的。通常，我们可以使用该事件来验证表单输入的有效性，并在验证失败时阻止表单提交以显示错误。

以下是一个示例代码，演示如何在blur事件中停止表单提交并显示错误信息：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Blur AJAX</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <form id="myForm" action="submit.php" method="post">
    <input type="text" id="username" name="username" placeholder="Username">
    <span id="usernameError" style="color: red;"></span>
    <br>
    <input type="password" id="password" name="password" placeholder="Password">
    <span id="passwordError" style="color: red;"></span>
    <br>
    <input type="submit" value="Submit">
  </form>

  <script>
    $(document).ready(function() {
      // 绑定blur事件
      $('#username').blur(function() {
        var username = $(this).val();
        if (username === '') {
          $('#usernameError').text('Username is required');
          // 阻止表单提交
          $('#myForm').submit(function(e) {
            e.preventDefault();
          });
        } else {
          $('#usernameError').text('');
        }
      });

      // 绑定blur事件
      $('#password').blur(function() {
        var password = $(this).val();
        if (password === '') {
          $('#passwordError').text('Password is required');
          // 阻止表单提交
          $('#myForm').submit(function(e) {
            e.preventDefault();
          });
        } else {
          $('#passwordError').text('');
        }
      });
    });
  </script>
</body>
</html>

在上面的代码中，我们使用了jQuery的blur事件来检查用户名和密码字段是否为空。如果字段为空，我们会在相应的错误信息元素中显示错误消息，并通过阻止表单提交来阻止表单的提交。

这个例子展示了如何使用jQuery的blur事件来停止表单提交以显示错误。你可以根据自己的需求进行修改和扩展。

相关搜索:Ajax表单提交和错误以JSON格式(django)显示在模板中 Jquery Ajax错误响应无法在错误块中获取表单对象 Jquery/ Ajax /CSS在使用Ajax缩小表单限制后显示/隐藏div 使用AJAX在PHP表单提交后显示成功消息使用Jquery在div中显示表单在ajax表单提交代码中遇到问题在ajax表单提交后显示div结果在c#中以编程方式提交表单在jquery中按enter键时提交表单在jquery中更改表单值后触发表单提交

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

javascript表单提交的内容显示在表格中

实现三个文本域的内容提交之后显示在表格中，代码直接用文本文件运行，记得后缀改为.html 运行结果输入123，并点击提交按钮之后，数据就会显示在下面的表格中，有什么问题可以私聊我。...textarea name="t2"> <input type="button" value="<em>提交</em>

7.3K4 0

杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交

采用Ajax整合表单数据进行提交给Servlet后台代码、可以完成同步或者异步操作。以下中，并没有去声明同步或者异步。该属性为async，默认值为true[异步]....中的 .ajax()方法【url表示传递数据到哪里的地址、type表示传递方式的选择、data表示传递的参数、success和error表示回调函数】 $.ajax({...url:"/bookServlet",// 替换掉form表单中的action属性值 type:"POST",//替换掉form表单中的method属性值...url:"/bookServlet",// 替换掉form表单中的action属性值 type:"POST",//替换掉form表单中的method属性值...// serialize()：是可以将整个表单的数据转成URL的字符串格式{注：意味着将整个表单进行了提交、不再像中级版一个参数一个参数提交了}

1.8K1 0

validation怎么用_什么是确认validation

validateNonVisibleFields false 是否验证不可见的元素（如 type=”hidden” 的输入框，或多个输入控件在选项卡切换中） showPrompts true 是否显示提示信息...[Demo] maxErrorsPerField false 单个元素显示错误提示的最大数量，值设为数值。...showOneMessage false 是否只显示一个提示信息 doNotShowAllErrosOnSubmit false 在提交表单时不显示所有的错误信息（建议使用参数 showOneMessage...ajaxFormValidation false 是否使用 Ajax 提交表单（默认使用 GET 方式发送数据） ajaxFormValidationURL false 设置 Ajax 提交的 URL，...默认使用 form 的 action 属性 ajaxFormValidationMethod ‘get’ 设置 Ajax 提交时，发送数据的方式 onAjaxFormComplete $.noop 表单提交

2.3K1 0

用jquery实现表单验证_jquery验证插件

PS：如果希望只在表单提交时验证，可以设置为空。...validateNonVisibleFields false 是否验证不可见的元素（如 type=”hidden” 的输入框，或多个输入控件在选项卡切换中） showPrompts true 是否显示提示信息...showOneMessage false 是否只显示一个提示信息 doNotShowAllErrosOnSubmit false 在提交表单时不显示所有的错误信息（建议使用参数 showOneMessage...ajaxFormValidation false 是否使用 Ajax 提交表单（默认使用 GET 方式发送数据） ajaxFormValidationURL false 设置 Ajax 提交的 URL...$.noop 表单提交验证通过后，Ajax 提交之前的回调函数 [Demo] function(form, options){} ajaxValidCache {} isError

4.3K4 0

JavaWeb18-jquery学习笔记（Java全栈开发）

常见事件重点掌握(5) click:单击 focus:获取焦点 blur:失去焦点 submit:表单提交 <meta http-equiv="Content-Type"...可以在父元素上检测子元素获取焦点的情况 blur和focusout 失去焦点 <script type="text/javascript" src=".....页面载入 ready(fn):页面载入,<em>在</em>一个页面<em>中</em>可以使用多次常用格式1: $(document).ready(function(){ .... }) 常用格式2: 格式1的简化版 $(function...底层是原始的<em>ajax</em>请求方式格式1: $.<em>ajax</em>(url,[settings]) 格式2:setting可以使用json格式 <em>jQuery</em>.<em>ajax</em>(settings) 参数: async 设置是否异步...<em>表单</em>序列化 erialize() 将<em>表单</em>中所有内容转成字符串。

6.8K9 0

杨老师课堂之Jquery的筛选,事件,效果,Ajax,javascript跨域)

停止事件冒泡停止时间冒泡可以阻止事件中其他对象的事件处理函数被执行.在jquery中提供了stopPropagation()方法来阻止冒泡事件....可以用同样的方法解决元素上的问题阻止默认行为网页中的元素都有自己默认的行为,例如:单击超链接后悔跳转,单击”提交”按钮会表单会提交,有时需要阻止元素的默认行为在jquery中,提供了preventDefault...举一个例子,在项目中,经常需要验证表单,在单击”提交”按钮是,验证表单内容,例如元素是否是必填字段,某元素长度是否够6位,单表单不符合提交条件时,要阻止表单的提交 eg: $(“#sub”).bind(...() 方法是在mouseover中相当于 IE浏览器的event.fromElement()方法,在mouse 中相当于IE浏览器的event.toElement方法. jquery对其进行了封装,使之能兼容各大浏览器...在jQuery 1.3中也可以接受一个字符串了。 •callback:载入成功时回调函数。

8.2K2 0

jQuery 教程

特效效果：jQuery 效果 – 隐藏和显示 | 菜鸟教程 – 隐藏和显示 – 淡入淡出 – 滑动 – 动画 – 停止动画 – Callback 方法 – 链(Chaining) jQuery 效果方法...fadeIn() 和 fadeOut() 方法之间进行切换 finish() 对被选元素停止、移除并完成所有排队动画 hide() 隐藏被选元素 queue() 显示被选元素的排队函数 show() 显示被选元素...简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。使用 AJAX 的应用程序案例：谷歌地图、腾讯微博、优酷视频、人人网等等。...如果 load() 方法已成功，则显示”外部内容加载成功！”，而如果失败，则显示错误消息： <!...，并把返回的数据放置到指定的元素中 serialize() 编码表单元素集为字符串以便提交 serializeArray() 编码表单元素集为 names 和 values 的数组 jQuery 属性

16.9K2 0

Web前端JQuery面试题（三）

Web前端JQuery面试题（三） Web前端JQuery面试题（三） 1.怎么阻止冒泡过程？...onload()方法要等页面中全部元素加载到浏览器中才执行，如果页面中存在大量图片，要等这些内容加载完毕。 ready()方法只要页面的dom模型加载完毕即可，就会触发ready()。...jquery中的load()方法，进行获取异步数据。...ajaxStart(callback) ajax请求开始时执行 ajaxComplete(callback) ajax请求完成时执行函数 ajaxError(callback) ajax请求发送错误时执行函数...ajaxSend(callback) ajax请求发送前执行函数结言好了，欢迎在留言区留言，与大家分享你的经验和心得。

3.1K2 1

jQuery中常用的函数和属性详细解析

( callback ) 当所有的AJAX都停止时，执行一个函数。...这是一个Ajax事件当所有AJAX请求都停止时，隐藏loading信息。...这是一个Ajax事件当AJAX请求成功完成时，显示信息。...show( speed, [callback] ) 以优雅的动画显示所有匹配的元素，并在显示完成后可选地触发一个回调函数。 hide( ) 隐藏所有的匹配元素。...slideDown( speed, [callback] ) 通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。

2.5K1 0

Javaweb05-Ajax

1、基于jQuery的Ajax 1.1 基本Ajax 参数说明 url 请求地址 type 请求类型 data 请求参数 dataType 返回参数 success 成功处理函数 error 错误处理函数...注意基本Ajax,get提交Ajax,post提交Ajax,接收返回的boolean值都是String类型的；只有$.getJSON提交接收返回的boolean值是boolean类型的； <script...jQuery方式使用的Ajax //当用户登录，输入用户名后，失去焦点，校验登录用户名再系统中是否被使用 $("#uname").blur(function(){..."); } }); 1.2 get提交Ajax 语法:$.get(url,params,success); //基于JQuery...进行了异步登录请求，此处表单就不能再提交,否者表达再提交会出错 return false; }); }); 注意：再使用Ajaz提交表单时，一定要返回

8361 0

=.=

： required="required" 重置表单： $('#pwdform')[0].reset() jquery自动触发点击事件： <script type="text/javascript...click"); }); input只读不可编辑： //可以点击，可以选择，不能输入 //可能会导致提交时获取不到该属性...testid="+data.id; jquery声明： $(function() { }); ajax： $.ajax({ type:"post",...window.location.href="denglu.jsp"; } else { alert(data.msg);//打印相应的错误信息

6105 0

10个jQuery表单操作代码片段

代码片段1: 在表单中禁用“回车键” 大家可能在表单的操作中需要防止用户意外的提交表单，那么下面这段代码肯定非常有帮助： $("#form").keypress(function(e) {...and multiple select elements) else if (tag == 'select') this.selectedIndex = -1; }); }; 代码片段3: 将表单中的按钮禁用...下面的代码对于ajax操作非常有用，你可以有效的避免用户多次提交数据，个人也经常使用：禁用按钮： $("#somebutton").attr("disabled", true); 启动按钮： $(..."']").addClass("labelfocus"); }).blur(function() { $("label").removeClass("labelfocus"); }); 代码片段7:...动态方式添加表单元素这个方法可以帮助你动态的添加表单中的元素，比如，input等： //change event on password1 field to prompt new input $('

8980 0

JQuery最全常用方法指南

; ajaxStop(callback) 当所有的AJAX都停止时，执行一个函数。...这是一个Ajax事件当所有AJAX请求都停止时，隐藏loading信息。...这是一个Ajax事件当AJAX请求成功完成时，显示信息。...show(speed, [callback]) 以优雅的动画显示所有匹配的元素，并在显示完成后可选地触发一个回调函数。 hide() 隐藏所有的匹配元素。...slideDown(speed, [callback]) 通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。

10.9K2 0

JavaScript 学习-35.jQuery 基础语法与事件

AJAX Utilities 环境准备在网页中使用 jQuery 可以使用以下方法：从 jquery.com 下载 jQuery 库从 CDN 中载入 jQuery, 如从 Google 中加载...> 入口函数为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。...可以将 jQuery 代码位于一个 $(document).ready() 函数中 $(document).ready(function(){ // 执行代码 alert...入口函数与 JavaScript 入口函数的区别： jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。...隐藏和显示 jQuery 提供了隐藏和显示元素的基本方法 hide() 隐藏元素 show() 显示元素 toggle() 切换显示和隐藏示例如果你点击“隐藏” 按钮，我将会消失

1.9K1 0

JQuery快速入门

中，对Ajax方法进行了封装，如下表所示。...，而不是json提交，需要注意（通常调用接口，使用json提交；而页面的ajax请求，推荐使用form提交，会比较简单）。...在jQuery中，通常事件绑定是通过bind(type[,data],fn)方法实现的，其第一个参数为事件类型，非常丰富，包括blur,focus,load,resize,unload,click,dblclick...这样的机制在有时是需要的，但有时却不是期望的，那么就绪要通过event.stopPropagation()方法来禁止事件的冒泡了，此外，在jQuery中，可以通过event.preventDefault...()方法来阻止元素的默认行为，常用与a链接元素和submit表单提交行为。

2.5K10 0

前端技巧

路径的话自行解决，vue-cli中会存在requir('/path')的问题；分辨率的话可以用lowsrc=“低分辨率时显示的图片"；另外可以通过onerror去设置一个用于出错时显示的默认图片。...(10px); -ms-filter: blur(10px); filter: blur(10px); } 效果如图： image.png 通过form的action属性提交表单并接收处理返回值的方法...（页面不跳转）通过form的action属性提交表单很容易实现。...但由于这种方式是同步提交，所以会导致页面跳转，且不好拿到返回值，因此一般都用ajax代替。但有些情况ajax是不好用的，例如文件上传功能。... 通过form的action属性提交表单，并接收处理返回值的方法如下： //html: <iframe src="" frameborder="0" name

7401 0

【领会要领】web前端-轻量级框架应用（jQuery基础）

操作，查找，删除，创建，复制，插入，替换，jQuery事件，事件绑定，鼠标事件，键盘事件，表单事件，窗口事件，事件冒泡，事件解除。...就是说它非常请求，大小在30kb左右；具有强大的选择器和dom操作的封装，可靠的事件处理机制，有完善的ajax，jquery将所有的ajax操作封装到函数``$.ajax()`中；具有丰富的插件，完善的文档...='值']") 匹配与值不相等的元素 $("[属性名^='值']") 匹配以值开头的元素 $("[属性名$='值']") 匹配以值结尾的元素 $("[属性名*='值']") 匹配包含值的元素位置选择器...注意：$(A).prepend(B)的操作，不是将B前置到A中，而是将A前置到B中 after() 在每个匹配的元素之后插入内容 insertAfter() 将所有匹配的元素插入另一个指定的元素集合的后面...表单事件当提交表单时，会发生submit事件。change()当元素的值发生改变时，会发生change事件，focus()当元素获得焦点时，触发focus事件。blur()当元素失去焦点时触发。

2.1K2 0

web前端之锋利的jQuery八：jQuery插件的使用（表单验证、表单提交）

/js/jquery.validate.messages_cn.js"> 2.jQuery表单插件——Form： jQuery Form插件是一个优秀的Ajax表单插件，可以非常容易的...，无侵入的升级HTML表单以支持Ajax。...姓名”、“地址”、“自我介绍”字段的值会以无刷新的方式提交到文件demo.PHP中。...在这里，使用$.param()方法把它转化成字符串，得到以下这种格式：name1&address=2 需要注意的是，当表单提交时，Form插件会以Ajax方式自动提交这些数据第二个参数jqForm...这个回调函数中只要不返回false，表单豆浆杯允许提交；如果返回false，则会阻止表单提交。

6.6K5 0

validationEngine参数详解

blur” 触发验证的事件，支持事件可参考 jQuery 的事件说明。...PS：如果希望只在表单提交时验证，可以设置为空。...form 的 action 属性 ajaxValidCache {} onAjaxFormComplete $.noop 表单提交，Ajax 验证完成后的行为（Function）[Demo] onBeforeAjaxFormValidation...$.noop 表单提交验证规则通过后，Ajax 验证之前的行为（Function）[Demo] onValidationComplete false 表单提交验证完成时的行为（Function）可以得到两个参数...validate[ajax[ajaxUserCallPhp]] 在验证规则中自定义 “ajaxUserCallPhp”:{ “url”:”phpajax/ajaxValidateFieldUser.php

2.8K2 0

jQuery进阶前言

前言：在《jQuery入门》一文中，记录了jQuery选择器、属性与样式和DOM操作等内容，本文将对jQuery的事件以及Ajax相关知识点进行讲解。接下来就一起来学习一下。...二、表单事件： 1、blur()和focus(): 这两个就是处理表单焦点的事件，blur()是失去焦点，focus是聚焦。...4、submit()事件：这个是表单提交事件，提交表单时触发。...比如一般的网站登录的时候要输验证码，当你输完验证码，就会立即提示验证码正确还是错误，而不需要点击“登录”按钮后再去判断，这就用到了Ajax。接下来就看看如何使用。...它的调用格式如下： $.ajax([settings]) 其中参数settings为发送ajax请求时的配置对象，在该对象中，url表示服务器请求的路径，data为请求时传递的数据，dataType

2.4K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭