使用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驗證需要在提交時返回false。 在HTML中，您使用以下ID聲明表單：

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

您可以像通常的onkeyup（）一樣對每個字段進行ajax驗證，並根據布爾值是否有效將布爾值設置為true / false。

在Java中，我使用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，則不會提交表單。