0

いくつかのフィールドがあるフォームがあります。ユーザーが何かを入力すると、フィールドは入力が有効かどうかに関するフィードバックの送信を自動的に開始する必要があります。リストされている JavaScript コードは、瞬時のフィードバックを処理すると想定されていますが、応答はまったくありません。また、ユーザーの入力のいずれかが正規表現と一致しない場合、フォームの送信を停止することも想定されています。正規表現も機能しませんが、innerHTML を使用する前は完全に機能していました。innerHTML の使用が必須でない場合は、アラートの使用に戻ります。

function insert() {

   var valid = true;

    document.getElementById("MessNM").innerHTML = "";
    if (!document.getElementById("name").value.match(/^^[A-Z]{1}[a-z]{3,7}$/)) {
        document.getElementById("MessNM").innerHTML = " Please input a proper name.";
        valid = false;
    }

    document.getElementById("MessPS").innerHTML = "";
    if (!document.getElementById("password").value.match(/^[a-zA-Z0-9]{4,8}$/)) {
        document.getElementById("MessPS").innerHTML = " Please input a proper password with numbers and letters.";
        valid = false;
    }

    document.getElementById("MessPSC").innerHTML = "";
    if (document.getElementById("passwordcheck").value != document.getElementById("password").value) {
        document.getElementById("MessPSC").innerHTML = " Password does not match.";
        valid = false;
    }

    document.getElementById("MessAD").innerHTML = "";
    if (!document.getElementById("address").value.match(/^[a-zA-Z0-9\s,'-]{5,40}$/)) {
        document.getElementById("MessAD").innerHTML = " Address is not valid";
        valid = false;
    }

    document.getElementById("MessZC").innerHTML = "";
    if (!document.getElementById("zipcode").value.match(/^[0-9]{5}$/)) {
        document.getElementById("MessZC").innerHTML = " Please input a proper Zipcode.";
        valid = false;
    }
    if (!document.getElementById("zipcode").value.match(/^[0-9]{5}(-[0-9]{4})?$/)) {
        document.getElementById("MessZC").innerHTML = " Please input a proper Zipcode.";
        valid = false;
    } else {
        return valid;
    }
}

function test() {

    var result = true;

    if (!insert()) {
        result = false;
    }

    return result;
}

これは、javascript 関数が参照している html フォームです。

<form name="Insert" id="I2" action="order.php" method="post" style="display: none;" onsubmit="return test()">
    <p align="left">
        <div id="texter">
            <input type=text id="name" required="required" onkeyup="insert()" name="name" autocomplete="off" autofocus>Name <span id="MessNM"></span>
            <br>
            <input type=email id="email" required="required" onkeyup="insert()" name="email">Email Address <span id="MessEM"></span>
            <br>
            <input type=password id="password" required="required" onkeyup="insert()" name="password">Password <span id="MessPS"></span>
            <br>
            <input type=password id="passwordcheck" required="required" onkeyup="insert()" name="passwordcheck">Confirm Password <span id="MessPSC"></span>
            <br>
            <input type=text id="address" required="required" onkeyup="insert()" name="address">Address <span id="MessAD"></span>
            <br>
            <input type=text id="zipcode" required="required" onkeyup="insert()" name="zipcode">Zipcode <span id="MessZC"></span>
            <br>
        </div>
        <input type="submit" value="submit" onclick="test()">
        <input type="reset" value="Clear All">
        <br>
        <br>
</form>
4

1 に答える 1

0

私が見るいくつかの問題があります。

  1. style="display: none;"フォーム全体が見えなくなるフォームを持っています。
  2. 検証関数は、最初に失敗した検証で false を返します。これは、最初の無効なフィールドに対してのみエラー メッセージを表示することを意味します。たとえば、電子メール アドレスと郵便番号が無効な場合、電子メールのメッセージのみが表示されます。住所。
  3. アドレス検証の正規表現が壊れています。
  4. パスワード確認エラーが修正されると、エラー メッセージはクリアされません。

アラートを使用したときに機能していたという事実から、あなたが話している主な問題は、各フィールドの検証が false を返すという事実が原因であると推測しています。おそらく、以前にアラートが発生し、関数の最後にブール値を返したことがあるでしょう。これは、その問題と私が上で述べた他の問題に対処する解決策です。

<form name="Insert" id="I2" action="order.php" method="post" onsubmit="return test()">
    <p align="left">
        <div id="texter">
            <input type=text id="name" required="required" onkeyup="insert()" name="name" autocomplete="off"/>Name <span id="MessNM"></span>
            <br>
            <input type="email" id="email" required="required" onkeyup="insert()" name="email">Email Address <span id="MessEM"></span>
            <br>
            <input type="password" id="password" required="required" onkeyup="insert()" name="password">Password <span id="MessPS"></span>
            <br>
            <input type="password" id="passwordcheck" required="required" onkeyup="insert()" name="passwordcheck">Confirm Password <span id="MessPSC"></span>
            <br>
            <input type="text" id="address" required="required" onkeyup="insert()" name="address">Address <span id="MessAD"></span>
            <br>
            <input type="text" id="zipcode" required="required" onkeyup="insert()" name="zipcode">Zipcode <span id="MessZC"></span>
            <br>
        </div>
        <input type="submit" value="submit" onclick="test()">
        <input type="reset" value="Clear All">
        <br>
        <br>
</form>

function insert() {
    var valid = true;

    document.getElementById("MessNM").innerHTML = "";
    if (!document.getElementById("name").value.match(/^^[A-Z]{1}[a-z]{3,7}$/)) {
        document.getElementById("MessNM").innerHTML = " Please input a proper name.";
        valid = false;
    }

    document.getElementById("MessPS").innerHTML = "";
    if (!document.getElementById("password").value.match(/^[a-zA-Z0-9]{4,8}$/)) {
        document.getElementById("MessPS").innerHTML = " Please input a proper password with numbers and letters.";
        valid = false;
    }

    document.getElementById("MessPSC").innerHTML = "";
    if (document.getElementById("passwordcheck").value != document.getElementById("password").value) {
        document.getElementById("MessPSC").innerHTML = " Password does not match.";
        valid = false;
    }

    document.getElementById("MessAD").innerHTML = "";                                                           
    if (!document.getElementById("address").value.match(/^[a-zA-Z0-9\s,'-]*$/)) {
        document.getElementById("MessAD").innerHTML = " Address is not valid";
        valid = false;
    }

    document.getElementById("MessZC").innerHTML = "";
    if (!document.getElementById("zipcode").value.match(/^[0-9]{5}$/)) {
        document.getElementById("MessZC").innerHTML = " Please input a proper Zipcode.";
        valid = false;
    }
    if (!document.getElementById("zipcode").value.match(/^[0-9]{5}(-[0-9]{4})?$/)) {
        document.getElementById("MessZC").innerHTML = " Please input a proper Zipcode.";
        valid = false;
    } 

    return valid;
}
于 2013-04-15T00:30:03.457 に答える