Question

我正在尝试使用jQuery验证引导程序表单。

  var formSubmit =  $("#dl-mg-form-publish").validate({
        rules: {
            'dl-mg-input-youtube': {
                required: true,
                url:true,
            },
            'dl-mg-input-title': {
                required: true,
                minlength: 6   });

我想验证这个：

 var videoInformation = {
        youtubeID: $('#dl-mg-input-youtube').val(),
        title: $('#dl-mg-input-title').val(), }

这是我的HTML：

  <form class="form-horizontal dl-mg-form-horizontal" id="dl-mg-form-publish"  action="#">


    <div class="form-group">
        <label for="dl-mg-input-youtube" class="control-label col-xs-2">YouTube Video ID:</label>

        <div class="col-xs-6">
            <input type="url" class="form-control" id="dl-mg-input-youtube" name="dl-mg-input-youtube" placeholder="Youtube ID">

        </div>

    </div>

    <div class="form-group">
        <label for="dl-mg-input-title" class="control-label col-xs-2">Video Title:</label>

        <div class="col-xs-6">
            <input type="text" class="form-control" id="dl-mg-input-title" name="dl-mg-input-title" placeholder="Video Title">

        </div>
    </div>

我是编程新手我不知道如何先验证然后再提交。我尝试使用.click处理程序，但无论如何它都会提交带有错误的字段。请帮忙！

Answer 1

在提交表单之前，您需要验证表单。您可以在click事件中执行此操作，例如：

$("#target").click(function () {

    // Validate the form first
    if (!$("#dl-mg-form-publish").valid()) return false;

    // Your form is valid, so continue with you submit logic..
});

此处有更多信息：.valid()

修改

在按键上禁用自动验证

对validate()方法使用此选项：

$("#dl-mg-form-publish").validate({ onfocusout: false, onkeyup: false, // other options here })

即使发生验证错误，jQuery验证插件也会提交

1 个答案: