3

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送信されたフォームの検証されない入力の横に「添付」または表示しようとしていますが、方法がわかりません。私は目立たないようにこれを行いたいので、spanJavaScript 内で上記を作成します。

また、送信されたフォームのいずれかのフィールドが検証されない場合、フォームが送信されないようにするにはどうすればよいですか?

4

4 に答える 4

2

なぜ車輪の再発明をするのですか？jqueryフォーム検証プラグインを使用する必要があります。

編集：無効なフォームの送信を防ぐためのコードを追加しました。

あなたの質問に答えるために：

$('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;
});
于 2012-04-25T03:56:02.967 に答える
1

入力後にスパンタグを追加しています。フォームが再検証される前に、これらのスパンが削除され、必要な場合にのみ再作成されます。これらのスパンのいずれかが追加された場合、フォームは送信されません。

$('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
});
于 2012-04-25T03:58:08.217 に答える
-1 
 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***/
    }
于 2012-04-25T03:56:49.287 に答える
-1

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>​
于 2012-04-25T04:00:45.310 に答える