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

Question

我正在验证一种形式。当未输入必填字段时，它将返回 alert。它工作正常。

现在我通过添加 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")
                }       
            })

还有什么建议吗？

Answer 1

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

假设$('form')是<form></form> ,

否则应该是这样的 $('#form')对于 <div id="form"></div>