1

这是我为 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（阿贾克斯）：

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;
?>
4

2 回答 2

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" />
于 2013-03-04T10:31:16.410 回答
0

您的 Javascript 验证需要在提交时返回 false。在 HTML 中，您使用如下 ID 声明表单：

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

您可以像往常一样对每个字段进行 ajax 验证 onkeyup()，并根据它是否有效将布尔值设置为 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，则表单将不会提交。

于 2013-03-04T09:42:43.550 回答