1

これが私がajax検証のために書いたコードです。フォームの送信ボタンをまだ作成していません。問題は、すべてのフィールドに適切な情報が入力され、ajaxの方法で検証されるまで、送信ボタンを無効にする必要があることです。これは、2つのフィールドを持つ単なるサンプルです。私はこのような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;
?>
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">

通常のonkeyup（）のように、フィールドごとにajax検証を実行し、ブール値を有効かどうかに応じて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 に答える