JavaScript自定義驗證不起作用

Question

這是我的代碼：

<script type="text/javascript">
    function submitform() {
        if(document.getElementById('name').value=='') {
            alert('Please enter a name');
            return false;
        }
    }
</script>
<form action="mail.php" method="post" onsubmit="submitform();">
    <input type="text" id="name" name="name" placeholder="name">
    <input type="submit" value="submit">
</form>

如預期的那樣，提交表單時應調用submitform函數，如果名稱字段為空，則應返回false並發出警報。 但是，它只是通過。 有什么解釋嗎？

Answer 1

您需要使用return調用該函數，以便false值阻止默認操作（表單提交）

<form action="mail.php" method="post" onsubmit="return submitform();">
    <input type="text" id="name" name="name" placeholder="name">
    <input type="submit" value="submit">
</form>

Answer 2

您需要停止一點。

您可以使用onSubmit，但是最好刪除輸入的提交並放一個按鈕。 然后單擊按鈕，您可以做您想做的事情並最終提交表單

形成：

<form action="mail.php" method="post" id="mailForm">
<input type="text" id="name" name="name" placeholder="name">
<button id="submitMailForm">Submit</button>

JS：

$( document ).on( "click", "#submitMailForm", function(e) {
 //My control Here
 //If all ok
 $("#mailForm").submit();
});

Answer 3

您可以使用jquery而不是javascript進行這種驗證，這將非常容易實現。

<form action="mail.php" method="post">
  <input type="text" id="name" name="name" placeholder="name">
  <input type="submit" value="submit" id="submit">
</form>

<script>
   $(document).ready(function(){
     $("#submit").click(fucntion(e){
        if($("#name").val() == ""){
       alert("Name is empty");
       e.preventDefault();
     }
     });
   });
</script>

並且不要忘記在script標簽之前添加jquery庫。

Answer 4

您需要按如下方式更改onSubmit屬性

onsubmit="return submitform();"

所以你的HTML看起來像這樣

<form action="mail.php" method="post" onsubmit="return submitform();">
    <input type="text" id="name" name="name" placeholder="name">
    <input type="submit" value="submit">
</form>

Answer 5

<script type="text/javascript">
    function submitform(event) {
        if(document.getElementById('name').value=='') {
            alert('Please enter a name');
             event.preventDefault();
            return false;
        }
    }
</script>

<form action="mail.php" method="post" onsubmit="submitform(event);">
    <input type="text" id="name" name="name" placeholder="name">
    <input type="submit" value="submit">
</form>

您需要防止默認提交。 在JS中，返回false不會阻止“ submit”功能的傳播（使用不同的框架）。

我建議您閱讀： event.preventDefault（）與返回false 在此處輸入鏈接描述

Answer 6

只要嘗試這個腳本

function submitform() {
    var x = document.forms["fname"].value;
    x = x.trim(); // Remove white spaces
    if (x==null || x=="") {
        alert("First name must be filled out");
        return false;
    }
}

Answer 7

要取消提交，偵聽器需要返回true或false。 同樣，如果函數驗證了字段，則最好為其命名而不是在執行時對其進行命名，因此將其命名為“ validateForm”。

另外，為控件提供“名稱”的名稱會掩蓋表單自身的name屬性。 盡管在這里無關緊要，但是通常不要給任何表單控件一個與表單的標准屬性相同的名稱（例如，“提交”或“重置”）。

因此，您可能會得到類似以下內容的結果：

<script>
    function validateForm(form) {
        if (form.personName.value == '') {
            alert('Please enter a name');
            return false;
        }
    }
</script>

<form ... onsubmit="return validateForm(this);">
    <input type="text" name="personName">
    <input type="submit">
</form>