如果用户输入正确的值，如何清除服务器端验证错误消息？

Question

我有一个表单，字段是Name, Mobile, Email and Message。我正在使用 JQuery 验证。 Jquery 验证没有问题。我在服务器端验证消息上遇到了一些问题。

我正在使用 AJAX 提交表单并使用 JSON 响应显示服务器错误消息。

它也可以正常工作，但问题是当用户输入值时我无法清除服务器端错误消息。

如果Name 字段为空，则显示错误消息，但输入名称后仍显示错误消息。

检查名称字段何时为空并显示服务器端验证。

输入名称后仍然显示错误消息。

你能帮我解决这个问题吗？

AJAX

$("#form").validate({
        rules: {
            name:{
                required:true,
                minlength:3,
                lettersonly: true
            },
            mobileno:{
                required:true,
                minlength:10,
                maxlength:10,
                number: true
            },
            email:{
                required:true,
                email:true
            },
             message:{
                minlength:10
            }
        },  
        highlight: function(element) {
            $(element).removeClass("error");
        },   
        submitHandler: function(form) {
            //form.submit();
            $.ajax({
            url: "process.php",
            type: "POST",
            data: $('#form').serialize(),
            success: function (data) {
            var response = JSON.parse(data); 
             if (response.error_no === '1'){
                $('#errorname').html(response.error);
             }
             else if (response.error_no === '2'){
                $('#errorMobile').html(response.error);
             }
             else if(response.error_no === '3'){
                  $('#errorEmail').html(response.error);
             }
             else if(response.error_no === '4'){
              alert(response.error);
             }
             else{
                      $("#popup_verify-1").hide(); 
                      $("#popup_success-1").show(); 
                      $('#form')[0].reset();     
                     }
                  },
                  error: function (jXHR, textStatus, errorThrown) {
                    alert(errorThrown);
                  }
                }); // AJAX Get Jquery statment
                }
    });

Process.php

$name=$conn->real_escape_string(trim($_POST['name']));
      $mobileno=$conn->real_escape_string(trim($_POST['mobileno']));
      $email=$conn->real_escape_string(trim($_POST['email']));
      $message=$conn->real_escape_string(trim($_POST['message']));
      $ipaddress=$_SERVER['REMOTE_ADDR'];//ip address

  if($name =="") {
    $errorMsg[]=  "You did not enter a name.";
    $code= "1" ;
    }
  elseif($mobileno == "") {
    $errorMsg[]=  "Please enter number.";
    $code= "2";
  }
  elseif(is_numeric(trim($mobileno)) == false){
    $errorMsg[]=  "Please enter numeric value.";
    $code= "2";
  }elseif(strlen($mobileno)<10){
    $errorMsg[]=  "Number should be ten digits.";
    $code= "2";
  }elseif($email == ""){
    $errorMsg[]=  "You did not enter a email.";
    $code= "3";
} //check for valid email 
elseif(!preg_match("/^[_\.0-9a-zA-Z-]+@([0-9a-zA-Z][0-9a-zA-Z-]+\.)+[a-zA-Z]{2,6}$/i", $email)){
  $errorMsg[]= 'You did not enter a valid email.';
  $code= "3";
}

else{
       $sql="INSERT INTO contactus (name, mobileno, email, message, date_of_contact,ipaddress) VALUES (?, ?, ?, ?,?,?)";
       if ($stmt = $conn->prepare($sql)) {
          $stmt->bind_param("ssssss", $name, $mobileno, $email, $message, $currentdate, $ipaddress);
          $stmt->execute(); 
          $errorMsg[]=1;
       }
       else{
      $code= "4";
        $errorMsg[]='Poor Network Connection';
       }
        $stmt->close();
       $conn->close();
    }

    $respnonse['error_no']=$code;
    $respnonse['error']=$errorMsg;
  echo json_encode($respnonse);

Answer 1

问题实际上仍然是客户端。您返回的数据是正确的，没有错误，但您没有从页面中清除错误。

所以使用这样的东西来清除错误：

var response = JSON.parse(data); 

var hasError = false;
if (response.error_no === '1') {
    $('#errorname').html(response.error);
    hasError = true;
} else {
    $('#errorname').html('');
}

if (!hasError) {
    alert('Success, no errors!');
}