Question

我正在尝试使用jQuery验证js验证表单，但问题是我在烤面包机中没有收到任何错误消息。

我遵循此link来实现烤面包机中的错误。我收到的错误是文本框下方的“此字段必填”。下面是我的相同代码：

HTML

<form class="card-body">
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault01">First name</label>
      <input type="text" class="form-control" id="validationDefault01" name="firstName">
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationDefault02">Last name</label>
      <input type="text" class="form-control" id="validationDefault02" name="lastName">
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault03">City</label>
      <input type="text" class="form-control" id="validationDefault03" name="city">
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">State</label>
      <select class="custom-select" id="validationDefault04" name="state">
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault05">Zip</label>
      <input type="text" class="form-control" id="validationDefault05" name="zip">
    </div>
  </div>
  <div class="row">
    <div class="col-md-3 mb-3">
      <label for="username">Username</label>
      <input type="text" class="form-control" id="username" name="username">
    </div>
    <div class="col-md-3 mb-3">
      <label for="password">Password</label>
      <input type="text" class="form-control" id="password" name="password">
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="invalidCheck2" name="confirm">
      <label class="form-check-label" for="invalidCheck2">
        Agree to terms and conditions
      </label>
    </div>
  </div>
  <button class="btn btn-success" type="submit" id="submitBtn">Submit</button>
  <button class="btn btn-danger" type="reset">Reset</button>
</form>

JS

function toasterOptions() {
    toastr.options = {
        "closeButton": false,
        "debug": false,
        "newestOnTop": false,
        "progressBar": true,
        "positionClass": "toast-top-right",
        "preventDuplicates": true,
        "onclick": null,
        "showDuration": "100",
        "hideDuration": "1000",
        "timeOut": "5000",
        "extendedTimeOut": "1000",
        "showEasing": "swing",
        "hideEasing": "linear",
        "showMethod": "show",
        "hideMethod": "hide"
    };
};



$(document).ready(function () {
    toasterOptions();
    $('form').submit(function(e) { 
        e.preventDefault();
        $(this).validate({
            rules: {
                firstName: 'required',
                lastName: 'required'
            },
            messages: {
                firstName: () => {
                    toastr.error('First Name required')
                },
                lastName: () => {
                    toastr.error('Last Name required')
                }
            }
        });
        var values = $(this).serializeArray();
        var xyz = {};
        $.each(values, function (i, obj) { 
            xyz[obj.name] = obj.value
        });
        window.localStorage.setItem('data', JSON.stringify(xyz));
        toastr['info']('Done');
    });
});

有什么遗漏吗？

Answer 1

Dude只是将Required属性放在应该为您做的输入元素中，除非这些必需的属性被填写，否则from不会提交。

<input type="text" required class="form-control" id="validationDefault02" name="lastName">

Answer 2

第一个问题是，您应该在提交功能之外声明您的验证（仅声明一次验证）

第二，对于每种情况，您都必须使用消息验证作为返回烤面包机消息的函数，例如：

 "firstName": {
      required: function() {
           toastr.error('First Name required')
      },
  },

还建议您为表单使用一个ID，并通过单击按钮设置提交，然后使用jquery validate valid()函数检查表单是否有效

请参见下面的工作片段：

function toasterOptions() {
    toastr.options = {
        "closeButton": false,
        "debug": false,
        "newestOnTop": false,
        "progressBar": true,
        "positionClass": "toast-top-right",
        "preventDuplicates": true,
        "onclick": null,
        "showDuration": "100",
        "hideDuration": "1000",
        "timeOut": "5000",
        "extendedTimeOut": "1000",
        "showEasing": "swing",
        "hideEasing": "linear",
        "showMethod": "show",
        "hideMethod": "hide"
    };
};



$(document).ready(function () {
    toasterOptions();
    var form = $("#my-form");
    form.validate({
        onfocusout: false,
        rules: {
            "firstName": {
              required: true,
            },
            "lastName": {
              required: true,
            }
        },
        messages: {
            "firstName": {
              required: function() {
                  toastr.error('First Name required')
              },
            },
            "lastName": {
                required: function() {
                    toastr.error('Last Name required')
                },
            },
        },
        
        submitHandler: function(form {
          var values = $(form).serializeArray();
           console.log(values);
          var xyz = {};
          $.each(values, function (i, obj) { 
              xyz[obj.name] = obj.value
          });
          //window.localStorage.setItem('data', JSON.stringify(xyz));
          toastr['info']('Done');

        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js" integrity="sha512-VEd+nq25CkR676O+pLBnDW09R7VQX9Mdiij052gVCp5yVH3jGtH70Ho/UUv4mJDsEdTvqRCFZg0NKGiojGnUCw==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.css" integrity="sha512-3pIirOrwegjM6erE5gPSwkUzO+3cTjpnV9lexlNZqvupR64iZBnOOTiiLPb9M36zpMScbmUNIcHUqKD47M719g==" crossorigin="anonymous" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js" integrity="sha512-UdIMMlVx0HEynClOIFSyOrPggomfhBKJE28LKl8yR3ghkgugPnG6iLfRfHwushZl1MOPSY6TsuBDGPK2X4zYKg==" crossorigin="anonymous"></script>

<form id="my-form" class="card-body">
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault01">First name</label>
      <input type="text" class="form-control" id="validationDefault01" name="firstName">
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationDefault02">Last name</label>
      <input type="text" class="form-control" id="validationDefault02" name="lastName">
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault03">City</label>
      <input type="text" class="form-control" id="validationDefault03" name="city">
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">State</label>
      <select class="custom-select" id="validationDefault04" name="state">
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault05">Zip</label>
      <input type="text" class="form-control" id="validationDefault05" name="zip">
    </div>
  </div>
  <div class="row">
    <div class="col-md-3 mb-3">
      <label for="username">Username</label>
      <input type="text" class="form-control" id="username" name="username">
    </div>
    <div class="col-md-3 mb-3">
      <label for="password">Password</label>
      <input type="text" class="form-control" id="password" name="password">
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="invalidCheck2" name="confirm">
      <label class="form-check-label" for="invalidCheck2">
        Agree to terms and conditions
      </label>
    </div>
  </div>
  <button class="btn btn-success"  id="submitBtn" type="submit">Submit</button>
  <button class="btn btn-danger" type="reset">Reset</button>
</form>

如何在提交时使用jquery验证来验证表单？

2 个答案: