Question

在填充所有必填字段之前，如何阻止我的表单提交？必填字段可以是input，select等。

以下是我目前无效的代码。基本上在我点击提交按钮后，我想在表格中迭代每个字段，其中包含标签=＆＃39; required＆＃39;如果填写/选择了所有字段，则允许表单提交。

感谢。

$("#submitButton").click(function (e) {
    var submit = false;
    var count = 0;
    $('#Form input, #Form select').each(function () {
        var id = $(this).attr('id');
        var value = $('#' + id).val();
        var tagValue = $('#' + id).attr('tag');
        var isDisabled = $('#' + id).is(':disabled');

        if (isDisabled == false) {
            if ($('#' + id).is(':visible')) {
                if (tagValue == 'required') {
                    if (id == 'email') {
                        validateEmail('#' + id);
                    }
                    if (id == 'phone') {
                        validatePhone('#' + id);
                    }
                    if ($('#' + id).hasClass("currency")) {
                        validateCurrency('#' + id);
                    }
                    if ($('#' + id).is('select')) {
                        if (value == '' || value == 'Unknown' || value == 'unassigned' || value == null) {
                            $('#' + id).css({
                                'border': '1px solid #F70D1A'
                            });
                        }
                    }
                    else if (value == "") {
                        $('#' + id).css({
                            'border': '1px solid #F70D1A'
                        });
                    }
                    if (value == '' || value == 'Unknown' || value == 'unassigned' || value == null) {
                        submit = false;
                    } else {
                        submit = true;
                    }
                }
            }
        }
    });
    if (!submit) {
        e.preventDefault();
    }
});

Answer 1

不应将此事件附加到按钮单击，而应将其附加到提交时的表单：

$('#Form').on('submit', function (e) {
  //-- your current code should work fine, put it here
});

我继续清理你的方法：

$("#Form").on('submit', function (e) {
    var submit = true;
    //-- use find+filter to reduce the set of matched elements
    $(this).find('input, select').filter('[tag="required"]:visible:enabled').each(function () {
        var $this = $(this),
            value = $this.val();
        //-- switch for unique flags
        switch ($this.attr('id')) {
            case 'email': validateEmail($this); break;
            case 'phone': validatePhone($this); break;
        }
        //-- continue parsing non-unique flags
        if ($this.hasClass('currency')) validateCurrency($this);
        if (!value || value === 'Unknown' || value === 'unassigned') {
            $this.css('border', '1px solid #F70D1A');
            submit = false;
        }
    });
    if (!submit) {
        e.preventDefault();
    }
});

注意事项：

我删除了所有不必要的基于ID的查找。这是一个巨大的性能损失，应该简化为单个$(this)查找，您应该重复使用。
我目前正在将$this传递给每个验证方法，因此必须相应地进行更新。
我没有遍历所有选择/输入字段，而是首先减少了匹配的元素，减少了不必要的代码。
根据提供的代码，我根据自己的理解简化了逻辑。
我切换了submit标志上使用的方法。它现在开始有效，如果任何项目未通过检查，则设置为false。

Answer 2

$('#Form').on('submit', function (e) {
  $.each(this.find("[tag='required']"),function(i,item)
{
validation logic goes here.
 ....
}
)});

阻止提交，直到填充所有必填字段（输入，选择..）

2 个答案: