Question

我正在使用validate插件来发送一些ajax。我遇到的问题是我无法序列化select option和checkbox。

我的最终结果是让字符串看起来像dashName=aaa&dashSurname=bbb&dashArea=Blue...

使用下面的代码我可以获得input text值;如何验证并获取其他元素的值？

这里是fiddle

  $('#updateMemberForm').validate();

  $(document).on('click', '#saveMemberBtn', function() {

    if ($('#updateMemberForm').valid()) {

      var serialize = $("#updateMemberForm").serialize();

      $("#test").text(serialize);
      console.log(serialize);


    }
    return false;
  });

HTML：

<form method="post" id="updateMemberForm">
  <input class="" type="text" name="dashName" placeholder="Name" />
  <input class="" type="text" name="dashSurname" placeholder="Surname" />
  <br>
  <select onchange="" name="dashArea">
    <option value="" selected disabled>AREA</option>
    <option value="Red">RED</option>
    <option value="Blue">BLUE</option>
    <option value="Green">GREEN</option>
  </select>
  <br>
  <input class="" type="text" name="dashAddress" placeholder="Address" />
  <input type="checkbox" id="checkbox1" name="dash_enable">
  <br>
  <input type="submit" class="" id="saveMemberBtn" value="SAVE" />
</form>

Answer 1

由于您的SAVE按钮是type="submit"，因此您不需要click处理程序来捕获它并测试有效性。插件中内置的submithandler已经为您完成了这项工作。

$('#updateMemberForm').validate({
    submitHandler: function(form) { // only fires when valid
        var serialize = $("#updateMemberForm").serialize();

        $("#test").text(serialize);
        console.log(serialize);

        // AJAX goes here

        return false;
    }
});

DEMO：https://jsfiddle.net/rsfonzL7/

正如评论中已经提到的，当未选中复选框时，查询字符串中不会发送任何内容，而是在服务器端处理。这与jQuery Validate或.serialize()无关......这就是表单数据的构造和发送方式，无论方法如何。

JQUERY Validate - 序列选择和复选框

1 个答案: