jQuery Validate插件是JörnZaefferer的jQuery插件。其目的是对用户输入的数据执行客户端表单验证。
jQuery 验证 - 无法读取动态表单上未定义的属性“设置”
我使用的是Wordpress,但这道题实际上是一个Jquery验证。 HTML 部分(此部分使用不同的 id 重复) ... 我使用的是Wordpress,但这道题实际上是一个Jquery验证。 HTML 部分(此部分有不同的 id 重复) <div class="product-col" id="row-4016"> <div class="sync-prod-image"><img src="image1.jpg"></div> <div class="product-meta"> <div class="poster-table" border="0" width="100%"> <form action="" id="meta-form-43825" class="poster-meta-form" novalidate="novalidate"> <div class="size-11x17 poster-tr meta-4018 meta-row-wrap"> <div width="15%"><span>11x17<input type="hidden" name="base_amount" id="base_amount-4018" value="8"></span></div> <input type="hidden" value="43826" class="meta_price_id" id="poster_price-4018" name="poster_price-4018"> <div width="15%"><span>8.00<input type="hidden" class="base-price" name="base_price" id="base_price-4018" value="8.00"></span></div> <div width="15%"><span><input type="number" class="size-sale-price tooltipstered" id="reg_price_4018" name="reg_price_4018" value="9.00" min="8" step="0.01" target="4018"></span></div> <div width="15%"> <span id="profit-4018" class="profit-tag">1.00</span> <input type="hidden" name="meta_target" id="meta_target-4018" value="43827"> </div> <div width="40%"> <input type="hidden" name="meta_price_id" value="43826"> <input type="hidden" name="regular_price_id" value="43827"> <input type="hidden" name="sale_price" value="9"> <input type="hidden" name="base_price" value="8"> <input type="submit" id="meta-submit-43827" name="meta-submit-43827" value="Update"> <img src="bx_loader.gif" alt="Processing Poster Update" id="loading-4018" class="loading"> <img src="success.png" alt="Poster Update Success" id="success-4018" class="success"> <img src="error.png" alt="Poster Update Success" id="error-4018" class="error"> </div> </div> </form> <form action="" id="meta-form-43832" class="poster-meta-form" novalidate="novalidate"> <div class="size-16x24 poster-tr meta-4019 meta-row-wrap"> <div width="15%"><span>16x24<input type="hidden" name="base_amount" id="base_amount-4019" value="9"></span></div> <input type="hidden" value="43833" class="meta_price_id" id="poster_price-4019" name="poster_price-4019"> <div width="15%"><span>9.00<input type="hidden" class="base-price" name="base_price" id="base_price-4019" value="9.00"></span></div> <div width="15%"><span><input type="number" class="size-sale-price tooltipstered" id="reg_price_4019" name="reg_price_4019" value="9.00" min="9" step="0.01" target="4019"></span></div> <div width="15%"> <span id="profit-4019" class="profit-tag">0.00</span> <input type="hidden" name="meta_target" id="meta_target-4019" value="43834"> </div> <div width="40%"> <input type="hidden" name="meta_price_id" value="43833"> <input type="hidden" name="regular_price_id" value="43834"> <input type="hidden" name="sale_price" value="9"> <input type="hidden" name="base_price" value="9"> <input type="submit" id="meta-submit-43834" name="meta-submit-43834" value="Update"> <img src="bx_loader.gif" alt="Processing Poster Update" id="loading-4019" class="loading"> <img src="success.png" alt="Poster Update Success" id="success-4019" class="success"> <img src="error.png" alt="Poster Update Success" id="error-4019" class="error"> </div> </div> </form> <form action="" id="meta-form-43839" class="poster-meta-form" novalidate="novalidate"> <div class="size-24x36 poster-tr meta-4020 meta-row-wrap"> <div width="15%"><span>24x36<input type="hidden" name="base_amount" id="base_amount-4020" value="12"></span></div> <input type="hidden" value="43840" class="meta_price_id" id="poster_price-4020" name="poster_price-4020"> <div width="15%"><span>12.00<input type="hidden" class="base-price" name="base_price" id="base_price-4020" value="12.00"></span></div> <div width="15%"><span><input type="number" class="size-sale-price tooltipstered" id="reg_price_4020" name="reg_price_4020" value="14.00" min="12" step="0.01" target="4020"></span></div> <div width="15%"> <span id="profit-4020" class="profit-tag">2.00</span> <input type="hidden" name="meta_target" id="meta_target-4020" value="43841"> </div> <div width="40%"> <input type="hidden" name="meta_price_id" value="43840"> <input type="hidden" name="regular_price_id" value="43841"> <input type="hidden" name="sale_price" value="14"> <input type="hidden" name="base_price" value="12"> <input type="submit" id="meta-submit-43841" name="meta-submit-43841" value="Update"> <img src="bx_loader.gif" alt="Processing Poster Update" id="loading-4020" class="loading"> <img src="success.png" alt="Poster Update Success" id="success-4020" class="success"> <img src="error.png" alt="Poster Update Success" id="error-4020" class="error"> </div> </div> </form> </div> </div> </div> JavaScript jquery.validate.min.js 附加方法.js tooltipster.js jQuery(document).ready(function () { //initialize tooltipster on text input elements jQuery('input[type="number"]').tooltipster({ //find more options on the tooltipster page trigger: 'custom', // default is 'hover' which is no good here position: 'top', animation: 'grow' }); jQuery('.poster-meta-form').validate({ // initialize the plugin submitHandler: function (form) { var sale_price_val = jQuery(this).find("input[name=sale_price]").val(); var base_price_val = jQuery(this).find("input[name=base_price]").val(); var meta_hidden_id = jQuery(this).find("input[name=meta_price_id]").val(); var meta_price_id = jQuery(this).find("input[name=regular_price_id]").val(); var parent_form = jQuery(this); jQuery.ajax({ type: "POST", url: ajax_url, data:{ action: 'call_back_function', sale_price: sale_price_val, meta: meta_hidden_id, meta_price: meta_price_id }, cache: false, beforeSend: function() { parent_form.find(".loading").show(); }, success: function(data) { if ( data == 0 ) { parent_form.find(".loading").hide(); parent_form.find(".success").show(); setTimeout(function(){ parent_form.find(".success").fadeOut('slow'); }, 2000); } else{ parent_form.find(".loading").hide(); parent_form.find(".error").show(); setTimeout(function(){ parent_form.find(".error").fadeOut('slow'); }, 2000); }; } }); return false; } }); jQuery('.size-sale-price').each(function() { jQuery(this).rules('add', { min: function(element){ return jQuery(element).attr('min'); }, required: true, messages: { number: "Sale Price can not be less than Base Price!" } }); }); }); 控制台错误 未捕获类型错误:无法读取未定义的属性“设置” 在 a.fn.init.rules (jquery.validate.min.js?ver=4.7.4:4) 在 HTMLInputElement 处。 (社交媒体同步public.js?ver=1.0.0:534) 在 Function.each (jquery.js?ver=1.12.4:2) 在 a.fn.init.each (jquery.js?ver=1.12.4:2) 在 HTML 文档中。 (社交媒体同步public.js?ver=1.0.0:532) 在我 (jquery.js?ver=1.12.4:2) 在Object.fireWith [作为resolveWith] (jquery.js?ver=1.12.4:2) 在 Function.ready (jquery.js?ver=1.12.4:2) 在 HTMLDocument.K (jquery.js?ver=1.12.4:2) 更新 未捕获的类型错误:无法读取未定义的属性“形式” 在 a.fn.init.rules (jquery.validate.min.js?ver=4.7.4:4) 在 HTMLInputElement 处。 (社交媒体同步public.js?ver=1.0.0:546) 在 Function.each (jquery.js?ver=1.12.4:2) 在 a.fn.init.each (jquery.js?ver=1.12.4:2) 在 HTML 文档中。 (社交媒体同步public.js?ver=1.0.0:545) 在我 (jquery.js?ver=1.12.4:2) 在Object.fireWith [作为resolveWith] (jquery.js?ver=1.12.4:2) 在 Function.ready (jquery.js?ver=1.12.4:2) 在 HTMLDocument.K (jquery.js?ver=1.12.4:2) 问题出在 each 尝试使用输入 ID 添加规则 jQuery('.size-sale-price').each(function() { jQuery(jQuery(this).attr('id')).rules('add', { min: function(element){ return jQuery(element).attr('min'); }, required: true, messages: { number: "Sale Price can not be less than Base Price!" } }); });
我有一个表单,其中添加了一些验证设置,当我尝试提交表单时,Firefox 抛出太多递归错误。 这段代码在 Chrome 和 Internet Explorer 上运行良好。 有什么推荐的...
我有一个表格,可以选择通过 facebook connect 预先填充。用户连接后,他们的姓名和电子邮件会自动填写。问题是这不会触发 rem...
如果另一个输入字段为空,如何使用不显眼的验证使输入字段成为必填字段?
我有一个简单的表单,其中包含三个不同的文本框,用于在返回结果集之前输入搜索条件。在这三个字段中,我想将两个字段设置为有条件必填,如果...
我正在使用著名的 jQuery 验证插件,我想实现验证码控件。在他们的演示部分页面上有这个,但似乎有一个问题:当您单击图像时
在 jquery 验证自定义方法中显示来自 Web 服务的错误消息
我正在向 jquery 验证添加一个调用 Web 服务的自定义方法,但 Web 服务返回的不仅仅是一个布尔值。是否可以根据网络服务的返回调用显示错误...
在jquery的验证插件上,只有当用户将焦点放在另一个元素上时,错误消息才会消失。我想让它在写入正确信息后立即消失。验证如何
如何只触发一个特定的自定义验证?假设我有三种自定义验证方法: $.validator.addMethod('customValidation1', 函数(数据) { }, '错误'); $.validator.addMethod('
我正在想办法如何改变这个: $('#username').blur(function(){ $.post('注册/isUsernameAvailable', {"用户名":$('#用户名').val()}, 函数(数据){ ...
我正在尝试弄清楚如何使用 jQuery validate 来验证特定场景。用户必须从一组用户中选择至少一个用户,但列表中的每个用户都有一个数据属性
我创建了一个自定义方法,可以根据两种情况远程检查返回不同消息的电子邮件的有效性。如果我更改输入,我会在第一次验证开始时工作...
Javascript 对输入更改进行验证,仅在单击“提交”按钮时提交
我的网站上有一个表格。单击提交按钮时,将运行一个函数来获取每个字段的内容,根据正则表达式和其他要求验证内容,然后如果一切正常...
我创建了一个自定义方法,可以根据两种情况远程检查返回不同消息的电子邮件的有效性。如果我更改输入,我会在第一次验证开始时工作...
使用 Jquery 验证插件进行 Summernote 验证
我有一个带有远程验证字段的表单。我的Javascript如下: $("#myform").validate({ 规则:{ 主场:{ 偏僻的:{ 网址:“检查...
我有一个要验证的隐藏字段。但在一个用例下,可能还有其他隐藏的字段,我可以绕过这些字段。 有没有办法忽略所有隐藏字段,只忽略一个隐藏字段...
如何在使用 jQuery 验证解散之前验证 Bootstrap 模态
我在 Bootstrap 模式上有一个表单,如果提交,它会获取输入的数据并将其附加到模式后面的表单上...... 在模态被解除之前,我需要这些字段来验证。这...
How to add 'is-invalid' class on choices.js
我目前正在使用 validate.js 来验证我的表单和 choices.min.js 作为替代而不是使用 select 以便我在 select 上有一个合适的搜索栏。我目前正在测试cho ...
JS:在 choices.min.js 上添加适当的验证是 validate.js
我目前正在使用 validate.js 来验证我的表单和 choices.min.js 作为替代而不是使用 select 以便我在 select 上有一个合适的搜索栏。我目前正在测试cho ...
使用 jquery validatye 插件,我正在验证表单并将其提交到将表单数据存储在数据库中的服务器。问题是当用户双击表单时,有多个请求......
函数 submitAddStudent() { $("#modalForm").validate({ 规则:{ 姓名: { 要求:真实, 带空格的字母:真 }, 电子邮件: { </desc> <question vote="0"> <pre><code><script> function submitAddStudent() { $("#modalForm").validate({ rules: { name: { required: true, letterswithspace: true }, email: { required: true, email: true }, phone: { required: true, minlength: 10, maxlength: 10, digits: true } }, messages: { name: { required: "Please enter a name.", letterswithspace: "Please enter a valid name with letters and spaces only." }, email: { required: "Please enter an email address.", email: "Please enter a valid email address." }, phone: { required: "Please enter a phone number.", minlength: "Please enter a valid 10-digit phone number.", maxlength: "Please enter a valid 10-digit phone number.", digits: "Please enter a valid 10-digit phone number." } }, errorElement: "span", errorClass: "help-block", highlight: function(element, errorClass, validClass) { $(element).closest(".form-group").addClass("has-error"); }, unhighlight: function(element, errorClass, validClass) { $(element).closest(".form-group").removeClass("has-error"); } }); } </script> </code></pre> <p>完整代码:<a href="https://jsfiddle.net/wxber8yp/1/" rel="nofollow noreferrer">https://jsfiddle.net/wxber8yp/1/</a> 在上面的链接中包含 HTML 和脚本文件供您参考。</p> <p>在模态弹出窗体中,它不验证表单字段,我无法添加学生(添加学生)按钮在模态弹出窗体中不起作用。我期望表单应该通过 jquery 验证进行验证,并且应该将数据添加到数据库中。</p> </question> </body></html>