Question

我正在尝试使用一个DRY方法来使用ajax返回一个表单验证脚本。 JSON编码回复。

<div id="validateName">
 <label for="name">Full Name</label>
 <input name="name" id="name" class="form-control" type="text" placeholder="John Smith" />
 <p></p>
</div>

<div id="validateEmail">    
<label for="email">E-mail</label>
<input  type="email" name="email" id="email" placeholder="email@someserver.com" class="form-control"/>
<p></p>
</div>

以上是表格的样本。

function validateInput (input, error, message) {
   this.input = input;
   this.error = error;
   this.message = message;
}
//form is ajax loaded so .on is being used
    $(document).on("click", "#contact-form-submit", function(){
      //declare variables for areas we need to add messages or warnings to
var NameValidate = new validateInput ($("#contact-form").find('#name'), $("#contact-form").find('#validateName'), $("#contact-form").find('#validateName p'));

var EmailValidate = new validateInput ($("#contact-form").find('#email'), $("#contact-form").find('#validateEmail'), $("#contact-form").find('#validateEmail p'));

var arr = [ NameValidate, EmailValidate];

function validationMessage(msg) {
jQuery.each(arr, function() {
    var errorAlert = $(this.input).attr('id') + "Status";
    var errorMes = "" + $(this.input).attr('id') + "Message";
        $(this.error).addClass(msg.nameStatus);
    $(this.message).html(msg.nameMessage);  
    });
}

$.ajax({
type: "POST",
url: "includes/postForm.ajax.php",
data: $("#contact-form").serialize(),
dataType: "json",
success: function(msg){
    validationMessage(msg);
    },
error: function(){
    $('#myModal').modal('show');
    $("#.modal-body").html("There was an error submitting the form. Please try again.");
});// end ajax

//make sure the form doesn't post
return false;

}); // end submit for contact-form

我们的想法是为表单中的每个输入创建一个数组或对象。我现在的主要问题是validationMessage函数。我不知道如何修改msg;即.addClass（msg.nameStatus）。上面的一行是为了创建一个在msg之后插入的变量。但它不起作用。结果将是更改输入字段的外观并将消息插入输入下方的段落标记中。返回的JSON是“nameMessage”：“Name too short”，“emailStatus”：“has-error”，“emailMessage”：“电子邮件地址无效”。我是在正确的轨道上还是有更好的方法（除插件或额外的库）而不是我所在的课程。提前感谢您的帮助。

Answer 1

您的语法错误可能会阻碍您。它接近你的ajax调用的结尾：缺少大括号}。

$.ajax({
    type: "POST",
    url: "includes/postForm.ajax.php",
    data: $("#contact-form").serialize(),
    dataType: "json",
    success: function (msg) {
        validationMessage(msg);
    },
    error: function () {
        $('#myModal').modal('show');
        $("#.modal-body").html("There was an error submitting the form. Please try again.");
    }
}); // end ajax

所以要访问你的消息，我猜你是通过php文件json_encoding，你会想要使用类似的东西：

    success: function (data) {
        validationMessage(data.msg);
    },

其中msg是php中与您对应的消息的关联数组键。然后，您可以使用$('#validateName').append('<p>' + data.msg + '</p>');。

之类的内容将其添加到表单中

Answer 2

感谢Tomanow的回复，你指出我正确的方向。利用“数据”而不是“msg”就完全不同了。我更改了validationMessage函数以使用如下数据：

function validationMessage(data) {
    jQuery.each(arr, function() {
    var errorAlert = $(this.input).attr('id') + "Status";
    var errorMes = "" + $(this.input).attr('id') + "Message";
$(this.error).addClass(data[errorAlert]);
    $(this.message).html(data[errorMes]);
    });
  }

这样我可以在上面的函数中提供表单中所有输入的数组。然后，ajax中的成功调用被修改如下：

success: function(data){
validationMessage(data);
},

这样，当返回多个错误时，它们将与正确的输入匹配。

缺少大括号是复制并粘贴到问题的结果，好抓！

如何在不同的元素中显示ajax的部分返回JSON

2 个答案: