0

うーん.. ユーザーが名前、電子メール、またはメッセージを入力していない場合に入力する必要があるものを表示したいと思います.. たとえば、名前は入力したが、電子メールとメッセージを入力しなかったため、エラーが発生しますメールとメッセージを入力する必要があることを示します。ここの私のコードは、名前が入力されていてもすべてのエラーを表示します。

function validate() {
    var myName = document.getElementById("inputName");
    var myEmail = document.getElementById("inputEmail");
    var filter = /^[_a-z0-9]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/i;
    var myMessage = document.getElementById("inputMessage");
    var isValid = true;

    if(myName.value == "") {
        var myNameError = document.getElementById("inputNameError");
        myNameError.innerHTML = "Please provide your name.";
        isValid = false;
    }

    if (!filter.test(myEmail.value)) {
        var myEmailError = document.getElementById("inputEmailError");
        myEmailError.innerHTML="Please provide your email.";
        isValid = false;
    }       

    if(myMessage.value == "") {
        var myMessageError = document.getElementById("inputMessageError");
        myMessageError.innerHTML = "Please provide your message.";
        isValid = false;
    }

    return isValid;
}
4

2 に答える 2

1

jQuery 検証を試すことができます: http://jqueryvalidation.org/documentation/

多くの検証の頭痛の種から解放されます...

于 2013-08-11T08:53:21.117 に答える
0

あなたの質問に対する私の理解が正しければ。以下はあなたのシナリオです：

  1. 初めてフィールドに値を指定しないと、すべてのエラーが表示されます。
  2. 次に、名前フィールドに入力を行い、名前エラーが消えることを期待しますが、それでも表示されます。

その理由は、入力フィールドごとに 1 つのエラー区分 (合計で 3 つ) があり、入力が存在するときにそれらが非表示にならないためです。以下のようにコードを変更できます。

function validate() {
    var myName = document.getElementById("inputName");
    var myEmail = document.getElementById("inputEmail");
    var filter = /^[_a-z0-9]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/i;
    var myMessage = document.getElementById("inputMessage");
    var isValid = true;

    var myNameError = document.getElementById("inputNameError");
    var myEmailError = document.getElementById("inputEmailError");
    var myMessageError = document.getElementById("inputMessageError");

    //Initially hide all previous error messages.
    myNameError.className="hidden";
    myEmailError.className="hidden";
    myMessageError.className="hidden";

    if(myName.value == "") {
        myNameError.className="visible";//make error message div visible only on error.
        myNameError.innerHTML = "Please provide your name.";
        isValid = false;
    }

    if (!filter.test(myEmail.value)) {
        myEmailError.className="visible";//make error message div visible only on error.
        myEmailError.innerHTML="Please provide your email.";
        isValid = false;
    }       

    if(myMessage.value == "") {
        myMessageError.className="visible";//make error message div visible only on error.
        myMessageError.innerHTML = "Please provide your message.";
        isValid = false;
    }

    return isValid;
}

CSS

.hidden {display: none;}
.visible {display: block;}

EDITコメントに基づいてフィドルリンクを追加します。

于 2013-08-11T08:59:18.557 に答える