表單上的 onsubmit = "function( )" 不起作用

Question

我正在進行表單驗證，當我在表單中使用“onsbmit”調用我的 function“validtae()”時，它不起作用。 當我單擊按鈕提交假設發生的驗證不起作用我不知道為什么它不起作用，我試圖在 onsubmit 中添加返回仍然不起作用。 我嘗試在輸入標簽內使用 onfocus 調用 function 並且它有效但我想在單擊按鈕時工作。

 // getting inputs const namee = document.forms['myForm']['name']; const email = document.forms['myForm']['email']; const password =document.forms['myForm']['password']; // getting where the erroe gonna show const nameerror = document.querySelector('#nameerror'); const emailerror = document.querySelector('#emailerror'); const passworderror = document.querySelector('#passworderror'); // validation function function validate(){ if(namee.value == "" ){ namee.style.border = "2px solid red"; nameerror.textContent ="name cannot be blank"; namee.focus(); return false; } if(email.value == "" ){ email.style.border = "2px solid red"; emailerror.textContent ="email cannot be blank"; email.focus(); return false; } if(password.value == "" ){ password.style.border = "2px solid red"; passworderror.textContent ="password cannot be blank"; password.focus(); return false; } }

 <form name="myForm" method="post" onsubmit="return validate()"> <input type="text" id="name" name="name" placeholder="Name" required> <div id="nameerror"></div> <input type="email" id="email" name="email" placeholder="Email" required> <div id="emailerror"></div> <input type="password" id="password" name="password" placeholder="Create a password" required> <button id="submit" type="submit">Sign Up</button> </form>

Answer 1

我假設您想知道為什么沒有顯示錯誤消息。 這可能是因為在調用onsubmit之前，瀏覽器自己對required屬性的驗證開始了。 即此刻甚至沒有調用validate ，您可以通過添加console.log調用輕松驗證。

如果這不是您想要的，則刪除required的屬性。

 // getting inputs const namee = document.forms['myForm']['name']; const email = document.forms['myForm']['email']; const password =document.forms['myForm']['password']; // getting where the erroe gonna show const nameerror = document.querySelector('#nameerror'); const emailerror = document.querySelector('#emailerror'); const passworderror = document.querySelector('#passworderror'); // validation function function validate(){ if(namee.value == "" ){ namee.style.border = "2px solid red"; nameerror.textContent ="name cannot be blank"; namee.focus(); return false; } if(email.value == "" ){ email.style.border = "2px solid red"; emailerror.textContent ="email cannot be blank"; email.focus(); return false; } if(password.value == "" ){ password.style.border = "2px solid red"; passworderror.textContent ="password cannot be blank"; password.focus(); return false; } }

 <form name="myForm" method="post" onsubmit="return validate()"> <input type="text" id="name" name="name" placeholder="Name"> <div id="nameerror"></div> <input type="email" id="email" name="email" placeholder="Email"> <div id="emailerror"></div> <input type="password" id="password" name="password" placeholder="Create a password" > <button id="submit" type="submit">Sign Up</button> </form>

或者讓瀏覽器處理驗證並刪除您自己的validate function。

Answer 2

如果任何驗證檢查失敗，您應該使用event.preventDefault()

function validate(event){
    let invalid = 0
    if (namee.value == "" ) {
        namee.style.border = "2px solid red";
        nameerror.textContent ="name cannot be blank";
        namee.focus();
        invalid++;
    }
    if (email.value == "" ){
        email.style.border = "2px solid red";
        emailerror.textContent ="email cannot be blank";
        email.focus();
        invalid++;
    }
    if (password.value == "" ){
        password.style.border = "2px solid red";
        passworderror.textContent ="password cannot be blank";
        password.focus();
        invalid++;
    }
    if (invalid > 0) {
        event.preventDefault()
        return false
    }
}

Answer 3

<input type="submit" value="submit"/>

將提交按鈕更改為輸入，它將起作用。

Answer 4

看一下這個

 <input type="text" id="name" name="name" placeholder="Name" required> <div id="nameerror"></div> <input type="email" id="email" name="email" placeholder="Email" required> <div id="emailerror"></div> <input type="password" id="password" name="password" placeholder="Create a password" required> <button onsubmit="validate()" id="submit" type="submit">Sign Up</button>