Question

因此，我尝试使用属性＆＃34; required＆＃34;来验证HTML输入。在向AJAX提交表单之前，如果没有每个字段都有唯一ID，我就无法理解如何做到这一点（这是不可能的，因为我真的希望能够添加＆＃34;要求＆＃34;到字段并重用代码而不必在其中添加多个ID。）

这是我的HTML的狙击手，所以你可以看到我选择的内容：

    <div class="control-group">

        <label class="control-label"><span class="req">*</span> Contact Name:</label>
        <div class="controls">

            <input class="input-block-level" type="text" name="contactTitle" value="{$widget.options.contactTitle}" placeholder="Marty McFly" required />

        </div>
    </div>

这里是jQuery：

    function configureSubmit() {

        var reqInput = "input[required]"

        if( $( reqInput ) ) {

            $( reqInput ).each(function() {

                if( !$(this).val() ){

                    $('input[required]').addClass('falseVal');

                } else {

                    $('input[required]').removeClass('falseVal');

                }

            });
        }

        if ( $(reqInput).hasClass('falseVal') ) {

            alert("Please fill in all required fields.");
            $('input[required]').css('border', '1px solid red');

        } else {

            $.ajax({

                type: 'POST',
                url: $("#options-form").attr('action'),
                data: $("#options-form").serialize(),
                success: function(data) {

                    if (data=='1') {

                        if ($.inArray(configureId,staged_widgets)<0) {
                            staged_widgets.push(configureId);

                        }

                        $("#configure").modal('hide');
                        $("#widget-"+configureId).removeClass('new-widget');
                        updateWidget(configureId);  

                    }

                }

            });

        }

提交按钮：

    <input type="submit" class="btn btn-primary" onclick="configureSubmit(); return false;" Value="Update" />

正如您所看到的，如果字段为空，我会添加一个类，然后在填写字段时删除一个类。然后我检查这个课程，如果它不存在，则提交。

这里的问题是，如果我不使用.each（）选择器并且我有多个必填字段，只要填写第一个字段，它就会提交到AJAX。如果我执行使用.each（）选择器，它对于所有空字段都是正常的，除了最后一个。如果填写了最后一个字段，它将提交给AJAX，因为该函数将删除＆＃34; falseVal＆＃34;来自所有必填字段的课程。

必须有更好的方法来做到这一点！有什么想法吗？

Answer 1

我更喜欢先收集无效元素的集合....如果该集合有长度，你就不会继续。

这一行：

if( $( reqInput ) ) {

永远都是真的，即使不存在也是如此，因为它创建了一个jQuery对象，无论是否找到选择器匹配并且if({})是真实的

使用filter()可以获得残障人士的集合

var $required = $( "input[required]").removeClass('falseVal'),
    $invalid = $required.filter(function(){  
         return !this.value; // only want elements with no value
    }).addClass('falseVal');

if($invalid.length){
    alert('not all fields filled');
}else{
   $.ajax({/* options */});
}

检查多个必填字段是否为空

1 个答案: