php - 使用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" />