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验证，并根据它是否有效将boolean设置为true / false。

在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，则表单将不会提交。

使用ajax验证时禁用提交按钮

2 个答案: