0

基本的なフォーム検証を行おうとしていますが、うまくいきません。検証に合格した後にのみ、フォームを送信するようにする必要があります。私はそれを行う方法がわかりません。私のコードは以下です。

[重要なリクエスト] ** 私は実際にはこれにかなり慣れていないので、可能であれば、DOM に関する具体的な情報/説明と、それを操作してスタイルを設定する方法を取得したいと思います (W3School は役に立ちません) **

<form id="reg" method="POST" action="user.php" onsubmit="return validate()">

    <label for="first">First Name: </label>
    <input id="first" name="first" type="text" value="">

    <label for="last">Last Name: </label>
    <input id="last" name="last" type="text" value="">


    <button type="submit">Register</button>
</form> 



function validate(){

    if(document.getElementById('first').value == ""){
        alert('First Name Blank!');
        return false;
    }else{
        return true;
    }

    if(document.getElementById('last').value == ""){
        alert('Last Name Blank!');
        return false;
    }else{
        return true;
    }
}

ありがとう

4

4 に答える 4

1

これを試して：

function validate() {
  var validForm = true;
  var msg = '';

  if (document.getElementById('first').value == "") {
    msg += 'First Name Blank! ';
    validForm = false;
  }
  if (document.getElementById('last').value == "") {
    msg += 'Last Name Blank! ';
    validForm = false;
  }
  if (!validForm) {
    alert(msg);
  }

  return validForm;
}

プランカーの例

于 2013-11-09T17:28:28.007 に答える
0

JavaScript コードは次のようになります。

document.getElementById('submit').onclick = function () {
    if (validate()) {
        document.getElementById('reg').submit();
    }
}

function validate() {
    if (document.getElementById('first').value == "") {
        alert('First Name Blank!');
        return false;
    } else if (document.getElementById('last').value == "") {
        alert('Last Name Blank!');
        return false;
    } else {
        return true;
    }
}
于 2013-11-09T17:34:12.897 に答える
0

検証関数は名のみを検証します。有効かどうかに関係なく、関数は姓をチェックする前に戻ります。

function validate(){

    if(document.getElementById('first').value == ""){
        alert('First Name Blank!');
        return false;        // WILL RETURN EITHER HERE ...
    }else{
        return true;         // ... OR HERE
    }

ステートメントは、それが表示された時点で関数を終了し、その後returnの他のコードはまったく実行されません。

そのようにする代わりに、フィールドがすべて OK かどうかを判断するフラグを保持します。

function validate(){
    var isValid = true; // Assume it is valid

    if(document.getElementById('first').value = ""){
        alert('First Name Blank!');
        isValid = false;
    }

    if(document.getElementById('last').value == ""){
        alert('Last Name Blank!');
        isValid = false;
    }

    return isValid;
}
于 2013-11-09T17:24:53.540 に答える
0

検証を確認し、データが正しくない場合は送信を停止するコードを次に示します。

<form id="reg" method="POST" action="user.php">

    <label for="first">First Name: </label>
    <input id="first" name="first" type="text" value="">

    <label for="last">Last Name: </label>
    <input id="last" name="last" type="text" value="">


    <button type="button" id="submit">Register</button>
</form> 


document.getElementById('submit').onclick = function(){
    if(validate()){
         document.getElementById('reg').submit();
    }
}


function validate(){

    if(document.getElementById('first').value == ""){
        alert('First Name Blank!');
        return false;
    }else if(document.getElementById('last').value == ""){
        alert('Last Name Blank!');
        return false;
    }else{
        return true;
    }
}

ここで行ったのは、送信ボタンを通常のボタンにし、JS を介して送信を処理したことだけです。タイプの入力submitがクリックされると、ページは何があってもフォームを送信します。これを回避するには、通常のボタンにして、特定の条件が満たされた場合にフォームを手動で送信するようにします。

于 2013-11-09T17:26:12.353 に答える