21

解決策は非常に簡単です。入力ボックス内に値が見つからない場合、フォームが適切に送信されないようにしようとしています。ここに私の JSFiddle があります: http://jsfiddle.net/nArYa/7/

//マークアップ

<form action="" method="post" name="form" id="form">
<input type="text" placeholder="Your email*" name="email" id="email">
<input type="text" placeholder="Your name*" autocomplete=off name="name" id="user_name"
<button type="submit" id="signup" value="Sign me up!">Sign Up</button>
</form>

//jQuery

if ($.trim($("#email, #user_name").val()) === "") {
    $('#form').submit(function(e) {
        e.preventDefault();
        alert('you did not fill out one of the fields');
    })
}

JSFiddle でわかるように、問題は、両方のフィールドに何かを入力すると、警告ボックスがまだポップアップすることです。理由が分からなくて困っています。if($.trim($"#email, #user_name").val()) === "")内に何か問題があります か?

4

5 に答える 5

36

2 つのこと、#1 送信の試行ごとに空のフィールドのチェックを行う必要がある、#2 各フィールドを個別にチェックする必要がある

$('#form').submit(function() {
    if ($.trim($("#email").val()) === "" || $.trim($("#user_name").val()) === "") {
        alert('you did not fill out one of the fields');
        return false;
    }
});

更新されたフィドル

于 2013-07-25T17:52:14.970 に答える
6

ページの読み込み時にチェックが行われます。フォームの送信時にフィールドを確認する必要があります。

$('#form').submit(function(e) {
    if ($.trim($("#email, #user_name").val()) === "") {
        e.preventDefault();
        alert('you did not fill out one of the fields');
    }
});
于 2013-07-25T17:49:04.847 に答える
5

HTML5:入力タグで 必須を使用

  • ブール属性。

  • フォームを送信する前に、入力フィールドに入力する必要があります。

  • テキスト、検索、URL、電話、電子メール、パスワード、日付ピッカー、番号、チェックボックス、ラジオ、およびファイルで動作します。

    <input required type='text'...>

w3schools ヒント

于 2016-09-21T07:05:33.643 に答える
1

if ステートメントをコールバック内に配置します。

$('#form').submit(function(e) {
    if ($.trim($("#email").val()) === "" || $.trim($("#user_name").val())) {
        e.preventDefault();
        alert('you did not fill out one of the fields');
        //You can return false here as well
    }
});
于 2013-07-25T17:49:47.497 に答える