2

OK、入力がいくつかあります。それらを検証するためのこのコードがあります。

$("#form1").submit(function(){
    var isFormValid = true;

    $("#first_name").each(function(){
        if ($.trim($(this).val()).length == 0){
            isFormValid = false;
        }
    });

    if (!isFormValid) alert("Please Enter Your First Name");
    return isFormValid;
});

$("#form1").submit(function(){
    var isFormValid = true;

    $("#last_name").each(function(){
        if ($.trim($(this).val()).length == 0){
            isFormValid = false;
        }
    });

    if (!isFormValid) alert("Please Enter Your Last Name");
    return isFormValid;
});    

    $("#form1").submit(function(){
    var isFormValid = true;

    $("#dropdown").each(function(){
        if ($.trim($(this).val()).length == 0){
            isFormValid = false;
        }
    });

    if (!isFormValid) alert("Please Select Your Volunteer Choice");
    return isFormValid;
});

どういうわけか、メッセージの後にメッセージが届きます。私が目指していたのは、すべてのフィールドが同時に表示されるのではなく、フィールド アウトされていない次のフィールドのみが表示されることです。質問がある場合は、コメントしてください。説明するのは難しいです....もっとよく説明する機会を与えるまで、反対票を投じないでください。</p>

4

4 に答える 4

2

私はJQueryに精通していませんが、3つの関数をフォームにバインドしていると思います。つまり、それらはすべて呼び出されます

あなたがしたいときは、サブ検証関数を呼び出す1つの関数検証を作成することです。

また、ブール値ではなくメッセージを返すようにサブ検証メソッドを変更することをお勧めします。これにより、1 つのアラートですべてのエラーを表示できます。

于 2012-05-01T00:25:31.643 に答える
2

フォームの送信イベントにさまざまな関数をバインドしているため、複数のアラートがあります。それぞれが異なるフィールドをチェックし、フィールドが空の場合にアラートを発生させます。

3 つの検証ステップを 1 つの関数に移動し、その関数を送信イベントにバインドする必要があります。

何かのようなもの：

$("#form1").submit(check);


function check() {
    var isFormValid = true;
    var errors = array();

    $("#first_name").each(function(){
        if ($.trim($(this).val()).length == 0){
            isFormValid = false;
            errors.push("Please Enter Your First Name");
        }
    });

    $("#last_name").each(function(){
        if ($.trim($(this).val()).length == 0){
            isFormValid = false;
            errors.push("Please Enter Your Last Name");
        }
    });

    $("#dropdown").each(function(){
        if ($.trim($(this).val()).length == 0){
            isFormValid = false;
            errors.push("Please Select Your Volunteer Choice");
        }
    });

    if (!isFormValid) {
        var errorMsg = "";
        for (var i = 0; i < errors.length; i++) {
            errorMsg += errors[i] +  "\n";  
        }
        alert(errorMsg);    
    }

}
于 2012-05-01T00:26:22.490 に答える
2

コードを簡素化し、意図したとおりに動作させる方法を次に示します。

まず、同じメソッドを使用してすべてのフィールドを検証するため、コードを繰り返す代わりに関数でラップします。

function isFieldEmpty(jQuerySelector) {
    return $.trim($(jQuerySelector).val()).length == 0
}

次に、単一のsubmitハンドラーを使用してすべてをチェックし、return false検証に合格しないフィールドがある場合:

$("#form1").submit(function(){

    if(isFieldEmpty('#first_name')) {
        alert("Please Enter Your First Name");
        return false;
    }

    if(isFieldEmpty('#last_name')) {
        alert("Please Enter Your Last Name");
        return false;
    }

    if(isFieldEmpty('#dropdown')) {
        alert("Please Select Your Volunteer Choice");
        return false;
    }

    // Will return true only if all fields passed
    return true;
});
于 2012-05-01T00:29:50.120 に答える
2

これは、コードの冗長性、同じfunction、同じidentifier、同じlogic、同じ event handler、それぞれid selectorでは役に立たないためです。

違うのは科目だけです。これが私の提案です。

$("#form1").submit(function(){
    var errors = [];
    if($("#first_name").val().length == 0){
       errors.push("Please Enter Your First Name");
    }

    if($("#last_name").val().length == 0){
       errors.push("Please Enter Your Last Name");
    }
    // and so on

    if(var isFormValid = errors.length > 0) { 
         alert('you have errors'); 
         //errors contains all the error message if you need them
    }
    return isFormValid;
});
于 2012-05-01T00:39:31.363 に答える