Question

我的表格是手风琴。我想验证每个部分而不是提交时的总表单。我无法让它发挥作用。

我的一些形式（我把隐藏的字段留下了）：

<!doctype html>
<html>

<head>
</head>

<body>
  <div class="wrapper">
    <nav class="mobile-menu">testing this menu</nav>
    <nav class="mobile-menuOriginal">testing this menu</nav>
    <header class="header">
      <div class="main-logo">
        <object data="svg/main-logo.svg" type="image/svg+xml">
          <img src="fallback.jpg" />
        </object>
      </div>
      <nav class="main-nav">
        <ul>
          <li><a href="">About</a>
          </li>
          <li><a href="">Services</a>
          </li>
          <li><a href="">Contact</a>
          </li>
        </ul>
      </nav>
    </header>
  </div>


  <section>
    <h1>Title</h1>
    <h2>Byline</h2>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
  </section>
  <footer>
    <h3>Footer</h3>
  </footer>
</body>

</html>

我的JS要验证：

<form id="test">
<div id="accordion">
<h3 class="frm_pos_top"><a href="#">Header</a></h3>
<div>
<div id="frm_field_179_container" class="frm_form_field form-field
frm_required_field form-group frm_top_container frm_first frm_half">
<label for="field_lz5ptt" class="frm_primary_label control-label">Question1
<span class="frm_required">*</span>
</label>
<select name="item_meta[179]" id="field_lz5ptt"  data-frmval="(Blanco)"
class="form-control"  >
<option value="(Blanco)"  selected="selected"> </option>
        <option value="10" >1</option>
        <option value="11" >2</option>
        <option value="12" >3</option>
        <option value="13" >4</option>
        <option value="20" >5</option>
</select>
</div>
<div id="frm_field_86_container" class="frm_form_field form-field
frm_required_field form-group frm_top_container frm_half">
<label for="field_n9ta9n" class="frm_primary_label control-label">Question 2?
<span class="frm_required">*</span>
</label>
<div class="input-group"><span class="input-group-addon">€</span> <input
type="tel" id="field_n9ta9n" name="item_meta[86]" value=""  maxlength="6"
class="add_thou form-control"  />
</div>
</div>
<div class="back_next" style="float:right;"><input type="button" value="Volgende" id="button1" class="x-btn x-btn-flat x-btn-rounded x-btn-small volgende-button"/></div>

我无法弄清楚我哪里出错了。我已阅读每个教程，但没有看到它。任何人都可以帮助我吗？

Answer 1

将JS更改为：

jQuery(document).ready(function($) {
$("#button1").on('click', function (){
var c = $("input[name='item_meta[83]']:checked").val();
var form = $("#test");
if (form.valid() == true){
if(c == '2') {
    $("#ui-id-1").addClass("ui-state-disabled gereed");
    $("#ui-id-3").removeClass("ui-state-disabled");
    $("#accordion").accordion({
    active: 1
    });
} else {
    $("#ui-id-1").addClass("ui-state-disabled gereed");
    $("#ui-id-5").removeClass("ui-state-disabled");
    $("#accordion").accordion({
    active: 2
    });
}
}
});
});    

jQuery(document).ready(function($) {
var form = $("#test");
form.validate({
    rules: {
        "item_meta[179]": {
            required: true,
            min: 1
        },
        "item_meta[86]": {
            required: true,
            minlength: 4
        }
},
messages: {
"item_meta[179]": "Required",
"item_meta[86]": {
        required: "Required",
        minlength: "Minlength is 1.000"
        }
},
    highlight: function(element) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error');
    },
    errorElement: 'span',
    errorClass: 'help-block',
    errorPlacement: function(error, element) {
        if(element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    }
});
});

用jquery验证手风琴表格部分

1 个答案: