Javascript 使用AJAX进行阵列验证：显示错误消息

尝试通过FormRequest验证验证阵列。 我可以通过

data.responseJSON.error.name[0]

访问字段“name”的错误消息，并将其显示给用户

error: function(data, xhr, errmsg, err){
      console.log("data")
      console.log(data.responseJSON)
      $(".form-alert").fadeIn();
      $(".form-error").text(data.responseJSON.error.name[0]);

这个很好用。使用相同的方法，我可以访问其他字段的错误消息，但是我不能修改脚本来处理所有错误，我可以使它只与一个字段一起工作，如上所示

如何修改脚本以捕获错误，例如“field1”、“field2”

多谢各位

contact.html

        <!--<h3>Start a project?</h3>-->

          <form class="form" id="contact" method="POST" action="" autocomplete="off">
            {% csrf_token %}

            <div id="alert-box"></div>

            <div class='alert alert-danger alert-dismissable form-alert' role="alert" style='display:none'>
              <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span></button>
              <span class='form-error'></span>
            </div>
            {% if form.non_field_errors %}
              <div class='alert alert-danger alert-dismissable'>
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>{{ form.non_field_errors }}
              </div>
            {% endif %}
            {% for field in form %}
              {% if field.errors %}
                <div class='alert alert-danger alert-dismissable'>
                  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span>
                  </button>{{ field_errors }}
                </div>
              {% endif %}
            {% endfor %}


            <div class="form-row">
              <div class="form-group col-lg-6">
                <div class="entry">
                  {{ form.name|as_crispy_field }}
                </div>
              </div>

              <div class="form-group col-lg-6">
                <div class="entry">
                  {{ form.email|as_crispy_field }}
                </div>
              </div>

              <div class="form-group col-lg-6">
                <div class="entry">
                  {{ form.phone|as_crispy_field }}
                </div>
              </div>

              <div class="form-group col-lg-6">
                <div class="entry">
                  {{ form.subject|as_crispy_field }}
                </div>
              </div>

              <div class="form-group col-lg-6">
                <div class="entry">
                  {{ form.website|as_crispy_field }}
                </div>
              </div>

              <div class="form-group col-lg-6">
                <div class="entry">
                  {{ form.deadline|as_crispy_field }}
                </div>
              </div>

              <div class="form-group col-lg-6">
                <div class="entry">
                  {{ form.competitors|as_crispy_field }}
                </div>
              </div>

              <div class="form-group col-lg-6">
                <div class="entry">
                  {{ form.budget_range|as_crispy_field }}
                </div>
              </div>

              <div class="form-group">
                <div class="entry">
                  {{ form.message|as_crispy_field }}
                </div>
              </div>

              <div class="image-zoom" data-dsn="parallax">
                <input type="submit" value="Send Message" class="btn" style="color: #75DAB4">
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>

{%csrf_令牌%}
&时代；
{%if form.non_字段_错误%}
&时代；
{{form.non_field_errors}}
{%endif%}
{%形式的字段为%}
{%if field.errors%}
&时代；
{{field_errors}}
{%endif%}
{%endfor%}
{{form.name}as_crispy_field}
{{form.email}as_crispy_field}
{{form.phone}as|u crispy_field}
{{form.subject}as|crispy_field}
{{form.website}as|u crispy_field}
{{form.deadline}as_crispy_field}
{{form.competitors}as|u crispy_field}
{{form.budget|u range|as_crispy_field}
{{form.message | as_crispy_field}

用户界面中显示的错误消息：

更新

error: function(data, xhr, errmsg, err){
            $(".form-alert").fadeIn();
            //loop through error
            $.each(data.responseJSON.error, function(i, val) {
            //loop through inner array for each keys
              $.each(val, function(i, val1) {
                console.log(val1)

                error += "<h6>" + val1 + "</h6>" //apppend message in some variable
              })
            })

            $(".form-error").html(error) //add to form-error

错误：函数（数据、xhr、errmsg、err）{
$（“.form alert”）.fadeIn（）；
//循环错误
$.each（data.responseJSON.error，function（i，val）{
//循环遍历每个键的内部数组
$。每个（val，函数（i，val1）{
console.log（val1）
错误+=“”+val1+//apppend消息位于某个变量中
})
})
$（“.form error”）.html（error）//添加到表单错误

您可以使用

$。每个
循环迭代JSON对象，然后使用
+=
将每个错误附加到某个变量中，最后将其添加到
表单错误中

演示代码：


var数据={
“responseJSON”：{
“错误”：{
“电话”：[“请告诉我一些事情…”，
“名称”：[“请填写…”“，“soemhting…”
}
}
}
$（“.form alert”）.fadeIn（）；
var误差=”；
//循环错误
$.each（data.responseJSON.error，function（i，val）{
//循环遍历每个键的内部数组
$。每个（val，函数（i，val1）{
console.log（val1）
错误+=“”+val1+//apppend消息位于某个变量中
})
})
$（“.form error”）.html（error）//添加到表单错误

&时代；
您可以使用迭代所有错误消息，并将这些消息附加到.form error中element@Swati我添加了user中显示的错误。问题是我无法修改javascript来处理两个错误，即电话和姓名，以便显示适当的消息。嗨，Swati，非常感谢您的帮助，但我正在努力使其正常工作，我将脚本修改为sh请检查上面的更新。我已运行脚本，但未显示消息。请演示如何在变量中追加消息？在for循环之前添加
var error=“”；
行。