堆栈内存溢出
  繁体   English   中英

jQuery验证插件仅在最后显示的div上有效

[英]jQuery validate plugin working only on last shown div [duplicate]

 原文  2018-05-24 00:26:17  6   2    javascript/ jquery/ jquery-validate

问题描述

该问题与以下内容完全相同：

我试图验证我的表单是jQuery显示/隐藏表单。 jQuery validate插件仅在最后一个div（输入类型文件）上验证我的最后一个输入。 我目前可以上传图片并成功提交表单，而其余输入为空。

以下是第三个div，当我单击未填写输入内容的帖子广告时，将显示“此字段为必填字段”。 第三师

以下是没有验证消息的第一个div 第一师

以下是没有验证消息的第二个div 第二师

这是我的表格： 

<!DOCTYPE html>
<html lang="en">

<head>

   <title>Zootopia</title>

   <script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

   <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>

</head>

<body>

<form id="ad_form" method="post">

  <div id="ad_form_section1">

    <div class="form-group">
       <label for="ad_title">Ad Title</label>
       <input type="text" class="form-control stored" id="ad_title" placeholder="e.g. German Sheperd puppy - 4 months old" name="ad_title" required>
    </div>

    <div class="form-group">
       <label for="description">Describe what you're offering</label>
       <textarea class="form-control stored" id="description" rows="6" placeholder="e.g. Owner supervised visits, minimum 1hr bookings, play with my german sheperd puppy in my backyard" name="description" required></textarea>
    </div>

  <button type="button" id="ad_section2" class="btn btn-primary"> Next </button>

  </div>

  <div id="ad_form_section2">

    <div class="form-group">
       <label for="location"> Location</label>
       <input type="text" id="location_ad" class="form-control stored" placeholder="location" name="location" required/>
    </div>

    <div class="form-group">
       <label for="price">Price</label>
       <input type="text" id="price" class="form-control stored" name="price" placeholder="$0.00" required/>
    </div>

   <button type="button" id="back_section1" class="btn btn-primary"> Back </button>

   <button type="button" id="ad_section3" class="btn btn-primary"> Next </button>
  </div>

  <div id="ad_form_section3">

    <div>
       <label> Select pet pictures</label>
       <input type="file" name="multiple_files[]" id="multiple_files" multiple required/>
    </div>

    <button type="button" id="back_section2" class="btn btn-primary"> Back </button>

    <input type="hidden" name="action_type" value="add" />

    <input type="submit" id="ad_button" class="btn btn-primary" value="Post ad" />

  </div>

</form>

这是我的JavaScript： 

$(document).ready(function(){

  $("#ad_section2").click(function(){
      $("#ad_form_section1").hide();
      $("#ad_form_section2").show();
  });

  $("#back_section1").click(function(){
      $("#ad_form_section1").show();
      $("#ad_form_section2").hide();
  });

  $("#ad_section3").click(function(){
      $("#ad_form_section3").show();
      $("#ad_form_section2").hide();
  });

  $("#back_section2").click(function(){
      $("#ad_form_section2").show();
      $("#ad_form_section3").hide();
  });

    $("#ad_form").validate({
        rules:{
              ad_title:{
                required: true
              },
              description:{
                required: true
              },
              location:{
                required: true
              }
        },
        messages:{
              ad_title: {
                required: "please enter an ad title"
              },
              description: {
                required: "please enter a description"
              },
              location: {
                required: "please enter a location"
              }
        },
            submitHandler: function(form) {
              var petID = $( "#pet_ad option:selected" ).val();
              var addAdUrl = "../../controller/post_ad_process.php?petID=" + petID;

                   $(form).ajaxSubmit({
                      url:addAdUrl,
                      type:"post",
                      datatype: 'json',
                      success: function(result){
                          if(result.petAd == false){
                            alert("Pet ad already exists!");
                          }else{
                            alert("Ad posted!");
                            $('#image_table').hide();
                          }
                      },
                      error: function(error) {
                        alert("Error");
                      }
                  });
            }
      });
})

这是我的CSS： 

#ad_form_section2,
#ad_form_section3{
  display: none;
}

2 个解决方案

解决方案1
 1  2018-05-24 02:15:36

默认情况下，插件将忽略所有隐藏的字段。 您必须将ignore选项设置为“ nothing”。 

$("#ad_form").validate({
    ignore: [],  // ignore nothing, validate everything
    rules:{
        ad_title:{ ....

如果您期望在显示/隐藏表单的各个部分时进行验证，则不是这样。 来回单击时，您将必须在相关字段上以编程方式触发验证。 .valid()使用.valid()方法 。

但是，多步骤验证很快就会变得乏味，因此您可能必须重新考虑整个方法。 我个人喜欢将每个部分放在自己的<form></form>标记集中，这样我就可以分别控制每个步骤的验证。

这是一个例子：

https://stackoverflow.com/a/20481497/594235

解决方案2
 1 已采纳  2018-05-24 02:27:17

您需要添加条件才能显示/隐藏下一个字段 

if ( $('field-id').valid() ) {
     // Code 
}

例如： 

$("#ad_section2").click(function(){
   if ($('#ad_title').valid() && $('#description').valid()) {
      $("#ad_form_section1").hide();
      $("#ad_form_section2").show();
    }
});

另外，不要忘记设置字符编码以避免字符范围错误，请在<head>标签下面添加以下代码： 

<meta charset="UTF-8">

表格范例： 

 $(document).ready(function(){ $("#ad_form").validate({ rules:{ ad_title:{ required: true, minlength: 3, // set minimum title length }, description:{ required: true, minlength: 10, }, location:{ required: true } }, messages:{ ad_title: { required: "please enter an ad title", minlength: "Your title must be more than 3 characters!", }, description: { required: "please enter a description", minlength: "Your description must be at least 10 characters long", }, location: { required: "please enter a location" } }, submitHandler: function(form) { var petID = $( "#pet_ad option:selected" ).val(); var addAdUrl = "../../controller/post_ad_process.php?petID=" + petID; $(form).ajaxSubmit({ url:addAdUrl, type:"post", datatype: 'json', success: function(result){ if(result.petAd == false){ alert("Pet ad already exists!"); }else{ alert("Ad posted!"); $('#image_table').hide(); } }, error: function(error) { alert("Error"); } }); } }); $("#ad_section2").click(function(){ // Check if valid before show/hide if ($('#ad_title').valid() && $('#description').valid()) { $("#ad_form_section1").hide(); $("#ad_form_section2").show(); } }); $("#back_section1").click(function(){ $("#ad_form_section1").show(); $("#ad_form_section2").hide(); }); $("#ad_section3").click(function(){ // Check if valid before show/hide if ($('#location_ad').valid()) { $("#ad_form_section3").show(); $("#ad_form_section2").hide(); } }); $("#back_section2").click(function(){ $("#ad_form_section2").show(); $("#ad_form_section3").hide(); }); }); 
 #ad_form_section2, #ad_form_section3 { display: none; } label.error { color: red; } 
 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script> <div class="container"> <form id="ad_form" method="post"> <div id="ad_form_section1"> <div class="form-group"> <label for="ad_title">Ad Title</label> <input type="text" class="form-control stored" id="ad_title" placeholder="eg German Sheperd puppy - 4 months old" name="ad_title"> </div> <div class="form-group"> <label for="description">Describe what you're offering</label> <textarea class="form-control stored" id="description" rows="6" placeholder="eg Owner supervised visits, minimum 1hr bookings, play with my german sheperd puppy in my backyard" name="description" required></textarea> </div> <button type="button" id="ad_section2" class="btn btn-primary"> Next </button> </div> <div id="ad_form_section2"> <div class="form-group"> <label for="location"> Location</label> <input type="text" id="location_ad" class="form-control stored" placeholder="location" name="location" required/> </div> <div class="form-group"> <label for="price">Price</label> <input type="text" id="price" class="form-control stored" name="price" placeholder="$0.00" required/> </div> <button type="button" id="back_section1" class="btn btn-primary"> Back </button> <button type="button" id="ad_section3" class="btn btn-primary"> Next </button> </div> <div id="ad_form_section3"> <div> <label> Select pet pictures</label> <input type="file" name="multiple_files[]" id="multiple_files" multiple required/> </div> <button type="button" id="back_section2" class="btn btn-primary"> Back </button> <input type="hidden" name="action_type" value="add" /> <input type="submit" id="ad_button" class="btn btn-primary" value="Post ad" /> </div> </form> </div>

文档中的更多示例

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 jQuery验证DIV上的插件 jQuery插件只适用于最后一个选择器 Jquery验证插件不适用于addmethod jQuery validate插件工作异常 自定义验证方法不起作用-jQuery验证插件 仅当display = none（显示div）时才验证输入检查 jQuery仅验证部分工作 jQuery验证插件仅允许文本 Jquery验证插件规则方法不起作用 Javascript-jQuery验证插件规则方法不起作用
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM