JQUERY 验证 - 序列化选择和复选框

JQUERY Validate - serialise select and checkbox

本文关键字：复选框 选择 序列化 验证 JQUERY      更新时间：2023-09-26

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

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

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

这里的小提琴

  $('#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>

由于您的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;
    }
});

演示：https://jsfiddle.net/rsfonzL7/

如注释中所述，如果未选中复选框，则查询字符串中不会发送任何内容，这是在服务器端处理的。 这与jQuery Validify或.serialize()无关...这就是表单数据的构造和发送方式，无论使用何种方法。

相关文章：