JS表單驗證不起作用

我想驗證一些使用JS函數的表單字段，但是當點擊提交按鈕時他們似乎沒有加載或檢查字段。JS表單驗證不起作用

<html> 
    <body> 
    <?php require_once('logic.php'); ?> 
    <h1>Add new Region/Entity</h1> 
    <?php 
     if ($_POST['submitted']==1) { 
     echo $error; 
     } 
    ?> 
    <form action="logic.php" method="post" name="registration" onSubmit="return formValidation();"> 
     Region: <input type="text" name="region" value="<?php echo @$_POST['region']; ?>"><br> 
     Description: <br><textarea name="description" cols="50" rows="10"><?php echo @$_POST['description']; ?></textarea><br> 
     Remarks: <input type="text" name="remarks" value="<?php echo @$_POST['remarks']; ?>"> 
     <input type="hidden" name="submitted" value="1"><br> 
     <input type="submit" value="Submit" onclick="">

而這裏的JS：

<script type="text/javascript"> 
    function formValidation() { 
    var region = document.registration.region; 
    var descr = document.registration.description; 
    var remarks = document.registration.remarks; 
    if(empty_validation()) { 
     if(reg_validation()) { 
     if(reg_letters()) { 
      if (desc_letters()) { 
      if (desc_validation()) { 

      } 
      } 
     } 
     } 
    } 
    return false; 
    } 
    function empty_validation() { 
    var reg_len = region.value.length; 
    var descr_len = descr.value.length; 
    var rem_len = remarks.value.length; 
    if (reg_len == 0 || decr_len == 0 || rem_len == 0) { 
     alert("Please fill all the fields"); 
     return false; 
    } 
    return true; 
    } 
    function reg_validation() { 
    if (reg_len > 50) { 
     alert("Only 50 characters are allowed in the Region field"); 
     region.focus(); 
     return false; 
    } 
    return true; 
    } 
    function reg_letters() { 
    var letters = /^[A-Za-z]+$/; 
    if(region.value.match(letters)) { 
     return true; 
    } else { 
     alert('Region field must have only alphabetical characters'); 
     region.focus(); 
     return false; 
    } 
    } 
    function desc_validation() { 
    if (descr_len > 500) { 
     alert("Only 500 characters are allowed in the description field"); 
     descr.focus(); 
     return false; 
    } 
    return true; 
    } 
    function desc_letters() { 
    var iChars = "[email protected]#$%^&*()+=-[]\\\';,./{}|\":<>?"; 
    for (var i = 0; i < descr_len; i++) { 
     if (iChars.indexOf(descr.value.charAt(i)) != -1) { 
     alert ("Your description has special characters. \nThese are not allowed.\n Please remove them and try again."); 
     return false; 
     } 
    } 
    return true; 
    } 
</script> 
</form> 
</body> 
</html>

正如你所看到的，我是從形式到PHP文件發佈值。我已經使用表單標籤中的onSubmit事件來初始化formValidation()函數。由於某種原因，它不工作。

這裏的a working example如果你需要一個。

來源

2012-12-03 17andLearning

您是否嘗試過調試？驗證時出現錯誤 - 「區域未定義」：'var reg_len = region.value.length;' – Ian

它不工作！沒有幫助。預計什麼？發生什麼事？ –

你不能在一個函數中聲明Javascript變量，然後期望它們在每個函數中都可用。你必須在每個函數中聲明它們才能使用它們。 – Ian

我不打算解決你的每一個小錯誤，但主要問題是變量沒有定義在你期望的位置。您不能在一個函數中聲明一個變量，並期望它在下一個函數中可用（不將其作爲參數傳遞或全局聲明）。例如，您的empty_validation功能應該是這樣的：

function empty_validation(region, descr, remarks) { 
    var reg_len = region.value.length; 
    var descr_len = descr.value.length; 
    var rem_len = remarks.value.length; 

    if (reg_len == 0 || decr_len == 0 || rem_len == 0) { 
     alert("Please fill all the fields"); 
     return false; 
    } 
    return true; 
}

而在你formValidation功能，你這樣稱呼它：

if(empty_validation(region, descr, remarks)) {

這只是一個例子，你需要做的幾個地方。

其他一些東西 - 您總是會從formValidation返回false ......您是不是要把return true;放在最裏面的if聲明中？此外，因爲所有你似乎做的是調用每個這些功能，你或許可以把它們放到一個大的if聲明，就像這樣：

if (empty_validation() && reg_validation() && reg_letters() && desc_letters() && desc_validation()) { 
    return true; 
} 
return false;

來源

2012-12-03 15:22:35 Ian

謝謝，這有幫助。 http://appinventr.com/Task/interface.php 雖然第一次驗證有效（某些情況下，當字段留空時顯示警報），但解除警報後似乎不起作用。我已經編輯了代碼幷包含了像你所建議的變量，它是活在那個鏈接 – 17andLearning

@AnimeshTripathi你能夠調試嗎？例如，使用Firebug或開發工具來觀察瀏覽器控制檯中發生了什麼？無論如何，新的錯誤是「decr_len未定義」：if（reg_len == 0 || decr_len == 0 || rem_len == 0）'。您似乎混合了變量名稱 - 在'decr_len'和'descr_len'之間 – Ian

@AnimeshTripathi並且對於'desc_validation'函數，您將參數設置爲'deacr'，但將其用作'descr' – Ian

JS表單驗證不起作用

回答

相關問題