首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

jquery验证尚未创建的元素

在JavaScript中,可以使用jQuery来验证尚未创建的元素。具体实现方法如下:

  1. 首先,在HTML中添加一个input元素,并为其添加一个class属性,例如"required"。<input type="text" class="required" id="myInput">$(document).ready(function() { $('#myInput').on('input', function() { // 获取input元素的值 var inputValue = $(this).val(); // 判断input元素的值是否为空 if (inputValue === '') { // 如果input元素的值为空,则隐藏提交按钮 $('#submitBtn').hide(); } else { // 如果input元素的值不为空,则显示提交按钮 $('#submitBtn').show(); } }); });$.validator.addMethod('required', function(value) { // 获取input元素的值 var inputValue = $(this).val(); // 判断input元素的值是否为空 if (inputValue === '') { // 如果input元素的值为空,则隐藏提交按钮 $('#submitBtn').hide(); return false; } else { // 如果input元素的值不为空,则显示提交按钮 $('#submitBtn').show(); return true; } });$('#submitBtn').click(function() { // 获取表单中的所有input元素 var inputs = $('input'); // 遍历所有input元素,并将其值添加到表单中 inputs.each(function() { var inputValue = $(this).val(); $('#myForm').append('<input type="text" name="' + $(this).attr('name') + '" value="' + inputValue + '">'); }); // 提交表单 $('#myForm').submit(); });以上代码中,首先使用jQuery的on方法来监听input元素的值变化事件。当input元素的值发生变化时,获取该元素的值,并通过Validator来检查该元素是否为空。如果该元素为空,则隐藏提交按钮;否则,显示提交按钮。
  2. 接下来,在JavaScript中,使用jQuery来获取该input元素,并添加一个自定义的validator。
  3. 在Validator中,可以定义一个函数,该函数用于判断input元素的值是否为空。
  4. 最后,在JavaScript中,使用jQuery来提交表单。

在Validator中,使用addMethod方法来定义一个required方法,该方法用于检查input元素的值是否为空。在required方法中,获取input元素的值,并判断该元素是否为空。如果该元素为空,则隐藏提交按钮;否则,显示提交按钮。

最后,使用jQuery的click方法来绑定提交按钮的点击事件。当提交按钮被点击时,获取表单中的所有input元素,并将其值添加到表单中,然后提交表单。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

jQuery创建html元素jQuery框架应用入门08】

jQuery创建一个html元素,将html标签字符串放入$()中就可创建一个DOM节点,接下去将DOM节点通过appendTo方法添加到指定某个DOM中即可。...或者是通过先找到某个添加html元素DOM节点,然后使用append方法添加DOM节点或者html字符串即可实现元素创建并添加,。 现在为我歌曲榜榜单再添加一首或几首歌。...首先找到音乐榜单所在区域是标签,那么先获取ol这个节点,使用jQuery代码$(“ol”)即可实现。...然后利用jQueryappend方法添加一首歌,使用代码: $("ol").append("水手") 或者 $("水手").appendTo($("ol")) 或者...图5-8 添加一首歌曲 通过此案例读者进一步见证,创建一个html元素把它添加到指定节点元素中,可以是字符串类型也可以是DOM节点类型。

14210

jquery 元素节点操作 - 创建节点、插入节点、删除节点

jquery节点操作说明 前面的篇章对于jquery元素操作大部分是使用html()方式来操作,这种直接使用字符串创建方式也是性能最高。...另外还有其他创建节点、插入节点、删除节点方法,如下: var $div2 = $('这是一个div元素'); # 创建节点 append() appendTo() #在现存元素内部...,从后面插入元素 prepend() prependTo() #在现存元素内部,从前面插入元素 after() insertAfter() #在现存元素外部,从后面插入元素 before() insertBefore...() #在现存元素外部,从前面插入元素 创建节点 var $div = $(''); var $div2 = $('这是一个div元素'); 插入节点 1、append...()和appendTo():在现存元素内部,从后面插入元素 下面写一个div内部插入元素示例如下: ?

9K40
  • jquery操作元素位置

    .offset()   在匹配元素中,获取第一个元素的当前坐标,或设置每一个元素坐标,坐标相对于文档。   .offset() 这个不接受任何参数。     ...() 这个方法不接受任何参数.position() 可以获取得元素相对于父元素偏移位置。...+ position.left + ", top: " + position.top ); .scrollLeft()   获取匹配元素集合中第一个元素的当前水平滚动条位置或设置每个匹配元素水平滚动条距离....scrollLeft(value)     设置每一个匹配元素水平滚动条距离。   ...$("div.demo").scrollLeft(300); .scrollTop()   获取匹配元素集合中第一个元素的当前垂直滚动条位置或设置每个匹配元素垂直滚动条距离。

    3.4K60

    jQuery中不同元素作用

    outerWidth() outerHeight() jQuery 遍历 jQuery 遍历,意为“移动”,用于根据其相对于其他元素关系来“查找”(或选取)HTML 元素。...以某项选择开始,并沿着这个选择移动,直到抵达您期望元素为止。 向上遍历 DOM 树 parent() - 返回被选元素直接父元素。...向下遍历 DOM 树 children()- 返回被选元素所有直接子元素。 find()- 返回被选元素后代元素,一路向下直到最后一个后代。...noConflict() 方法 jQuery 使用 符号作为jQuery简写。如果其他JavaScript框架也使用 符号作为简写怎么办?...当然,您仍然可以通过全名替代简写方式来使用 jQuery: var jq = $.noConflict(); jq(document).ready(function(){ jq("button")

    1.7K00

    jQuery 查找on事件绑定元素被绑定元素方法

    jQuery 查找on事件绑定元素被绑定元素方法 遇到问题 今天写了一个JQ插件,结果里面有一点问题.让我很郁闷.问题演示代码如下 $box.on('click', 'img', function(...){ $(this) }); 如上代码,当我点击这个图片时候 $(this) 是指 img ....当然这是正确. 而我需要找到 $box 也就是 img 父级. 如果不是插件的话,我当然可以根据它ID或者CLASS来进行查询.问题是,我是写插件,也就是说,我并不知道它这些信息是什么....解决方法 很多基础东西不理解,就会出现我这样问题.如同事所说,你是还不会爬呢,都学上跑了.因此,踩坑无数啊....解决方法如下: $box.on('click', 'img', function(){ $box.has($(this)) }); 如上,通过 .has 操作,就能找到唯一父级被绑定元素了.

    4.5K10

    JQuery 遍历被选中checkbox元素

    https://blog.csdn.net/u011415782/article/details/78819667 需求 在一个简单Html页面中,我需要读取所有被选中checkbox...元素所在区域某一元素值(举例下拉框weight值)总和 框架 :ThinkPHP 3.2.3 Ⅰ. html 源代码 如下代码只是其中一部分 <li class="li-user-addr...Js 代码编写/实现 var allWeight = 0; //TODO 取出所有被选中<em>的</em> checkbox <em>元素</em> var cb_checked = $('.cb_addr:checked'); var...cblen = cb_checked.length; if (cblen == 0){ //如果没有选中<em>的</em><em>元素</em> alert('请选择要分配<em>的</em>地址'); }else { //TODO...附录 参考文章: <em>jquery</em>选择器 之 获取父级<em>元素</em>、同级<em>元素</em>、子<em>元素</em>

    2.2K30

    JQuery 遍历:发现元素魔法之旅

    欢迎来到 JQuery 奇妙世界,一个充满活力和灵感地方。在这个世界里,我们将一起探讨 JQuery 遍历功能,这是一个让你轻松发现和操作网页元素神奇工具。...这就是 JQuery 遍历用武之地。遍历不仅仅是寻找元素,更是发现元素之美的一种方式。在这篇博客中,我们将深入研究 JQuery 遍历方方面面,让你在前端道路上越走越远。...遍历基础在 JQuery 中,遍历主要通过选择器和遍历方法实现。首先,我们来看一下基础选择器。1. 元素选择器元素选择器是最简单一种选择器,通过元素标签名选择对应元素。...这些基础选择器让我们能够准确地选取页面上元素,但有时候我们需要更灵活方式来定位元素。这时就需要使用 JQuery 遍历方法。...通过 siblings() 方法,获取了这些元素兄弟元素,并给兄弟元素添加了一个类名和文字内容。遍历艺术JQuery 遍历方法就像艺术家画笔,让你能够在页面上自由地漫游,发现元素美丽和奥秘。

    20111

    强大jQuery验证插件:jquery.validate.js+jquery.validate.unobtrusive.js

    以前接触过jQuery.Validate客户端验证插件,当时觉得不好用并且不太符合中文化开发习惯,后来在项目中选择了国人写jQuery formValidator(作者QQ:69353693,群号:74106519...),这几天在看.Net MVC4时候,看到微软官方出jquery.validate.unobtrusive.js,再看看其MVC4产生客户端代码,我被震撼了,可读性变强了,编程复杂度降低了,看来不能老守旧...如果我们做基于HTML5开发,其实不用.NET MVC4,也可以直接用其jquery.validate.unobtrusive.js,这样我们Html和客户端验证工作就会变得很简单。...Plugin网址 [URL=http://bassistance.de/jquery-plugins/jquery-plugin-validation/]http://bassistance.de/.../docs.jquery.com/Plugins/Validation[/URL] 对于jquery.validate.unobtrusive.js,暂时没找到官方帮助和网页: Unobtrusive

    2.4K30

    jquery获取第几个子元素_js获取元素指定子元素

    val(); $( this ).children( "input:last-child" ).val(); 通过>选择器,$(“.items>input:first”) 在这里转一篇《jQuery...只是取是最后一个; :only– child:返回所有没有兄弟节点元素,注意,文本元素不是,也就是说类似这样hellojquery,对于这段会选出...An+B所有子节点,比如3n+1返回所处位置为父节点子元素是3倍数加1那个子元素; :even:页面范围内处于偶数位置元素,如:li:even返回全部偶数li元素; :odd:页面范围内处于奇数位置元素...F所有子元素(F可以为E子类子类,甚至更远); E>F:匹配父元素E下所有标签名为F直接子元素; E+F:匹配所有标签名为F元素,并且有E类型兄弟节点在该F元素之前(E,F紧挨着); E~...V开头; E[A 4.利用jQuery自定义选择器进行选择: :button:选择任何按钮类型元素,包括input[type=submit]等等; :checkbox:选择复选框元素; :file

    27.2K30

    ASP.NET MVC客户端验证jQuery验证

    二、以内联方式指定验证规则 jQuery验证实际上是对存在于表单输入元素进行验证,它支持一种内联(Inline)编程方式是我们可以直接将验证规则直接编写在被验证输入HTML元素class(表示...虽然演示jQuery验证使用一个单纯HTML文件就可以了,但是在这里我们还是通过Visual StudioASP.NET MVC项目模板创建一个空Web应用,这样做有两个目的:其一、项目在创建过程中会自动添加包含...该方法不仅仅可以指定表单被验证输入元素对应验证规则,还可以指定验证消息,以及其他验证行为。...然后再调用表单validate方法实施验证时候按照如下方式手工地为被验证输入元素指定相应验证规则和错误消息,验证规则和错误消息与验证元素之间是通过name属性(不是id属性)进行关联。...ASP.NET MVC客户端验证jQuery验证 ASP.NET MVC客户端验证jQuery验证在Model验证实现 ASP.NET MVC客户端验证:自定义验证

    8.2K90

    jquery 获取鼠标和元素坐标点

    获取当前鼠标相对img元素坐标 $('div').mousemove(function(e) { varpositionX=e.pageX-$(this).offset().left;...(offset()方法) var offset = obj.offset(); 获取对象元素位置,分别是元素top和left,调用方法是:offset.left和offset.top,可知当前对象左部和顶部位置...3,获取对象元素宽度(width()方法) var right = offset.left+obj.width(); 实例中是获取对象右下角位置,创建新窗口左部位置。...4,获取对象元素高度(height()方法) var down =offset.top+obj.height(); 实例中是获取对象右下角位置,创建新窗口顶部位置。...5.获取对象相对于父元素位置(position()方法)   var x = obj.position().top;   var y =obj.position().left; <scripttype

    2.4K41
    领券