使用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，表单不会提交。