使用ajax驗證時禁用提交按鈕

Question

以下是我爲ajax驗證所寫的代碼。我還沒有創建表單的提交按鈕。問題是，我必須禁用提交按鈕，直到所有字段都填充了適當的信息並以ajax方式驗證。這只是一個包含兩個字段的示例。我有超過20個這樣的領域，請幫助我做到這一點。謝謝。

形式：

<p> 
<label for="cname">Name</label> 
<em>*</em><input id="cname" name="name" size="50" minlength="2"onkeyup="checkname()"/> 
<span id="target1"></span></p> 
<p> 
<label for="fat">Father's Name</label> 
<em>*</em><input id="cfat" name="father" size="50" onkeyup="checkfather()" /> 
<span id="target2"></span></p> 

使用Javascript（AJAX）：

var ajax = create_ajax_object(); 
function checkname(){ 
    if(ajax){ 
     ajax.onreadystatechange = function(){ 
    if(ajax.readyState == 4 && ajax.status == 200){ 
     document.getElementById("target1").innerHTML = ajax.responseText; 
    } 
     } 
     ajax.open("POST", "ajval.php", true); 
    var values = "name=" + encodeURIComponent(document.commentform.name.value); 
    values = values + "&action=" + encodeURIComponent("check1"); 
    ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
    ajax.send(values); 
    } 
    else{ 
     alert("Your browser doesnt support AJAX!");    
    } 
} 
function checkfather(){ 
    if(ajax){ 
     ajax.onreadystatechange = function(){ 
    if(ajax.readyState == 4 && ajax.status == 200){ 
     document.getElementById("target2").innerHTML = ajax.responseText; 
    } 
     } 
     ajax.open("POST", "ajval.php", true); 
    var values = "father=" + encodeURIComponent(document.commentform.father.value); 
    values = values + "&action=" + encodeURIComponent("check2"); 
    ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
    ajax.send(values); 
    } 
    else{ 
     alert("Your browser doesnt support AJAX!");    
    } 
} 

PHP：

<?php 
$action = $_POST["action"]; 
switch($action) 
{ 
case "check1": 
    $name=$_POST["name"]; 
    if($name!="") 
    echo '<img src="green-tick.png" height="20" width="20"/>'; 
    else 
    echo'<span style="color:red;">Cannot be left blank</span>'; 
    break; 
case "check2": 
    $father=$_POST["father"]; 
    if($father!="") 
    echo'<img src="green-tick.png" height="20" width="20"/>'; 
    else 
    echo '<span style="color:red;">Cannot be left blank</span>'; 
    break; 
?> 

Answer 1

您需要跟蹤您的有效字段。 對於每個驗證運行一個formIsValid方法來檢查整個表單是否有效並且可以啓用提交按鈕。

我會建議從實際的ajax請求中單獨運行，因爲在使用諸如複製粘貼或自動填充之類的操作時，更改事件不能可靠運行。

由於ajax驗證仍然需要客戶端組件，因此可能會被愚弄，並且可能會發送無效的表單。因此，無論如何您都無法在提交後驗證完整的表單。

// you could have an object with validation expressions for each field 
var fields = { 
    name: /.+/, 
    father: /.+/ 
} 

// then once on load and after each successful ajax check run this method 
function formIsValid() { 
    var valid = true; 

    for (var field in form.elements) { 
     valid = fields[field.name].test(field.vlaue); 
     if (!valid) { 
      break; 
     } 
    } 

    if all fields are valid the submit button will be enabled 
    document.getElementById("submit").disabled = !valid; 
} 

按鈕的html。

<!-- the disabled value is just for backwards compatibility --> 
<input type="submit" id="submit" disabled="disabled" value="Send" /> 

Answer 2

你的JavaScript驗證需要返回上提交虛假的。在HTML中，一個ID聲明的形式，像這樣：

<form method="POST" action="confirm.php" id="theform"> 

你可以做你的AJAX驗證每場像往常一樣的onkeyup（），並設置一個布爾值真/假取決於它是否有效或不。

而在JavaScript中，即時通訊使用jQuery，您執行以下操作：

$('#theform').submit(function() { 
    valid = true; 
    if() // check validation for 1st field 
    valid == false; 
    if() // check validation for 2st field 
    valid == false; 

    return valid; 
} 

如果該函數返回false，表單不會提交。