javascript – 仅验证表单中的可见字段

2023年6月19日 180次阅读

我正在验证一个表格.当没有输入必填字段时,它将返回alert.its正常工作.

现在我通过添加ng-class来隐藏一些表单字段,当我点击提交时我不想验证隐藏字段我只想验证那些没有隐藏类的字段.

这些是我的意见：

    <section  ng-class="{'hidden':true}">
            <input class="required" ng-model="currentData.name" />      
    </section>
    <section ng-class="{'hidden':true}">
            <input  class="required" ng-model="currentData.id"/>    
    </section>
    <section>
        <input class="required" type="text" ng-model='currentData.age'/>    
    </section>

    <section ng-class="{'hidden':true}">
        <input class="required" ng-model='currentData.gender'/> 
    </section>

    <section>
        <input class="required" ng-model='currentData.description'/>    
    </section>


Here am validating my fields :

    $form.find('input.required').each(function() {

                var $this = $(this)
                if ($this.val().trim() == '') {
                    alert("enter required fields")
                }       
            })

I have added `:visible`  its working good.But that wont be a proper solution I guess.Because if there are multiple tabs which is not having `hidden class`means, it will validate only current tab user currently viewing.

    $form.find('input.required:visible').each(function() {

                var $this = $(this)
                if ($this.val().trim() == '') {
                    alert("enter required fields")
                }       
            })

还有其他建议吗？

最佳答案

$('form').find('input.required').parent('*:not(".hidden")').each(function() {
        var $this = $(this)
        if ($this.val().trim() == '') {
            alert("enter required fields")
        }
    })

假设$(‘form’)是< form>< / form&gt ;, 否则应该是这样的
< div id =“form”>< / div>的$(‘#form’)

点赞