如果驗證失敗，則停止提交表單。

我正在驗證以下函數中的日期。如果驗證失敗，則表單不應提交。我試圖在onsubmit表單中返回false，但它仍然被提交。然而，驗證工作正常，並獲得我放入函數的警報。任何幫助在驗證失敗時停止提交表單。如果驗證失敗，則停止提交表單。

<script> 
    function dateCheck() 
    { 
     start = document.getElementById('name3').value; 
     end = document.getElementById('name4').value; 
     compare(start, end); 
     document.getElementById('name4').focus(); 

    } 

    function compare(sDate, eDate) 
    { 

     function parseDate(input) { 
      var parts = input.match(/(\d+)/g); 

      return new Date(parts[2], parts[0]-1, parts[1]); // months are 0-based 
      } 
     var parse_sDate = parseDate(sDate); 
     var parse_eDate = parseDate(eDate); 
     parse_sDate.setFullYear(parse_sDate.getFullYear() + 1); 

     if(parse_eDate >= parse_sDate) 
      { 
      alert("End date should not be greater than one year from start date"); 
      return false; 
      } 
     return true; 
    } 

</script> 
</head> 
<body> 
<form onsubmit="return dateCheck()"> 
<table> 
<tr> 
<td><input type="text" name="soname3" id="name3" size="15" readonly="readonly"> 
<img src="../Image/cal.gif" id="" style="cursor: pointer;" onclick="javascript:NewCssCal('name3','MMddyyyy','dropdown',false,'12')" /></td> 
<td><input type="text" name="soname4" id="name4" size="15" readonly="readonly"> 
<img src="../Image/cal.gif" id="" style="cursor: pointer;" onclick="javascript:NewCssCal('name4','MMddyyyy','dropdown',false,'12'); " /> </td> 
</tr> 
</table> 
<input type="submit" value="Submit"> 
</form>

來源

2013-07-15 user2581072

您是否忘記向DateCheck函數添加返回false語句？ – EricLaw

只是評論：

<form onsubmit="return dateCheck(this)">

：如果你的聽衆傳遞給窗體的引用

，您可以通過名稱或ID訪問控件

then：

function dateCheck(form) { 
    var start = form.name3.value; 
    ... 
}

請注意，您應該聲明變量，否則它們將在分配給它們的位置變爲全局變量。此外，在將它們傳遞給比較函數之前，應該檢查控件中的值（並顯示一條消息，要求用戶輸入一個有效值（如果不是））。

function dateCheck(form) { 
    var start = form.name3.value; 
    var end = form.name4.value; 
    var valid = compare(start, end); 

    if (!valid) form.name4.focus(); 

    return false; 
}

來源

2013-07-15 04:10:11 RobG

你可以使用jQuery Form Plugin來實現同樣的目的。

$(document).ready(function() { 

    $('#your_form_id').ajaxForm({ beforeSubmit: dateCheck }); 
});

來源

2013-07-15 03:59:14 wizzardz

除了OP不使用jQuery或AJAX。 – RobG

*旁註：*我寧願選擇jQuery驗證插件，其中包括您引用的插件的功能，以及擴展的表單驗證功能。 – Raptor

return是不會停止的形式提交自其是否在一個子功能稱爲例如compare(sDate, eDate)

因此改變你的函數這個

function dateCheck(e){ 

    var start = document.getElementById('name3').value; 
    var end = document.getElementById('name4').value; 
    if(compare(start, end)) { 
    // no error submit i guess 
    // return true ? 
    } else { 
    // error with date compare 
    return false; 
    } 
    end.focus(); 

}

來源

2013-07-15 04:01:13

沒有。 OP的方法很好。不需要使用'preventDefault（）'。在'onsubmit'事件上返回驗證結果是完全正確的。 – Raptor

意圖是僅在驗證失敗時取消提交。爲此，提交監聽器只返回* false *。 – RobG

@ShivanRaptor我根據你的評論編輯了我的問題 –

我感謝以上所有貢獻。我剛剛應用上述建議來解決我的挑戰&它工作正常。保持簡單我使用以下命令：

<form id="newuser" action="newuser.php" onsubmit="return pswderr(this)">

對於按鈕我有

<input id='submit' type="submit" value="Login" onClick="return pswderr();">

我的腳本是：

<script> 
function pswderr() { 
    var pswd1 = document.getElementById("newuserpswd").value; 
    var pswd2 = document.getElementById("rptpswd").value; 
    if (pswd1 !== pswd2) { 
     document.getElementById("alarm").innerHTML = "Password and password 
     verification do not match. Retry"; 
     return false; 
    } else {document.getElementById("alarm").innerHTML = ""; 
     return true; 
     } 
} 
</script>

來源

2015-08-25 19:23:25

在我來說，我在輸入使用模式並且還給了maxlength。

與我一起工作的是，從輸入字段中刪除長度屬性

來源

2018-03-09 10:45:38

如果驗證失敗，則停止提交表單。

回答

相關問題