Question

我正在进行一些jQuery表格验证，我想出了一个问题。到目前为止，我有以下代码：

// catch any form submission
$('form').submit(function () {
    'use strict';
    // if the browser doesn't support HTML5's required attribute
    if (!Modernizr.input.required) {
        // catch any field that should be required
        $(this).find('input[required]').each(function () {
            // if is empty
            if ($(this).val() === '') {
                // create a span that contains a warning to the user
                var requiredFieldWarning = document.createElement('span');
                requiredFieldWarning.text = 'This field is required.';

                // display the span next to the current field
            }
        });
    }
});

我正在尝试“附加”或在提交的表单的任何未验证的输入旁边显示span，但我不知道如何操作。我想不引人注意地这样做，这就是为什么我在JavaScript中创建所说的span。

另外，如果提交的表单的任何字段未验证，如何阻止提交表单？

Answer 1

为什么重新发明轮子？你应该使用jquery form validation插件..

修改：添加代码以防止无效表单的提交。

回答你的问题：

$('form').submit(function (e) {
    'use strict';
    var valid = true;
    var $form = $(this);
    $form.find("span.error").remove();
    // if the browser doesn't support HTML5's required attribute
    if (!Modernizr.input.required) {
        // catch any field that should be required
        $form.find(':input[required]').each(function () {
            // if is empty
            var $this = $(this);
            if ($.trim($this.val()) === '') {
                // create a span that contains a warning to the user
               $this.after("<span class='error'>This field is required.</span>");
               valid = false;
            }
        });
    }
    if(!valid){
       e.preventDefault();
    }
});

这是一个较短的版本：

$('form').submit(function (e) {
   'use strict';
    Modernizr.input.required ? e[$(this).find("span.error").remove().end()
        .find(':input[required][value=""]')
        .after("<span class='error'>This field is required.</span>")
        .length ? 'preventDefault': 'isDefaultPrevented']() : null;
});

Answer 2

我在输入后添加了span标记。在重新验证表单之前，它会删除这些跨度并仅在需要时重新创建。如果添加了任何这些跨度，则不提交表单。

$('form').submit(function (event) {
    'use strict';

    $('.invalid-error', $(this)).remove();
    // remove any old spans

    var submit_form = true;
    // form submits by default

    // if the browser doesn't support HTML5's required attribute
    if (!Modernizr.input.required) {
        // catch any field that should be required
        $(this).find('input[required]').each(function () {
            // if is empty
            if ($(this).val() === '') {  

                $(this).after('<span="invalid-error">This field is required.</span>');
                // add span after input
                submit_form = false;

            }
        });
    }
    if(!submit_form) event.preventDefault();
    // stop form from submitting
});

Answer 3

 var flag = 0;
 if ($(this).val() === '') {
       flag = 1;
       var warningblock = '<span class="warning">This field is required.</span>';
       $(this).after(warningblock);             
    } 
//end of each loop
if(flag){ //put this block out side the loop
 return false; //form wont submit
}
return true;

    CSS
    .warning{
    /**add styles for warning here***/
    }

Answer 4

jsFiddle（http://jsfiddle.net/4KxzB/10/）

这是我的工作示例，在chrome中按预期工作。

要停止提交表单，只需return false;

<form>
    <input type="text" required/>
    <input type="submit" value="submit"/>
</form>

<script>
    $('form').submit(function ()
    {
        'use strict';
        // if the browser doesn't support HTML5's required attribute
        if (!Modernizr.input.required)
        {
            var validInput = true;

            // catch any field that should be required
            $(this).find('input[required]').each(function ()
            {
                // if is empty
                if ($(this).val() === '')
                {
                    // create a span that contains a warning to the user
                    var requiredFieldWarning = document.createElement('span');
                    requiredFieldWarning.text = 'This field is required.';

                    // Cancels form submit
                    validInput = false;
                }
            });

            return validInput;
        }
    });
</script>

使用jQuery显示警告

4 个答案: