Question

我有一个带有表单的popover。它已经准备好提交了，这里是popover的代码

<div id="popover-head" class="hide">Add new subject</div>
<div id="popover-content" class="hide">
     <form class="form-inline" id="pop-form" method="POST" action="../admin/module_add_subject.do">
          <div class="form-group">

          <!-- This input is what i'm talking about -->
          <input type="text" name="subjectName" id="subject-name" required="required" pattern="^[\S\s]{3,25}[A-z]+$" title="Only accept alphabet characters and length is minimum of 3 and max of 25 " placeholder="Subject name.."/>

          <button class="btn btn-primary" type="button" id="add-subject" ><i class="icon-white icon-ok"></i></button>

       </div>
       <p></p>
       <p style="color:red" id="error-message"></p>
     </form>
</div>

上面的输入我确定正则表达式正在运行。当我将button更改为submit时，所需的工作完全正常，但当我将其更改回button时，它又无法正常工作。

由于此代码，我的submit按钮为type="button"的原因为：

$(document).on('click', '#add-subject', function(e) {
     $.post('../admin/module_check_subject.do', { subjectName: $('#subject-name').val() },
    function( data ) {
        // if data from the database is empty string
        if( $.trim( data ).length != 0 ) {
        // hide pop-over
        $('#popover').popover('hide');
        // submit form
        $('#pop-form').submit();
        } else {
        $('#error-message').text('Subject already exist.' );            
        }           
    }
     })
    .fail( function () {
                bootbox.alert('Failed to check, please try again later.');
    });
});

我正在做的是提交我将首先在我的数据库中检查，如果文本框中的输入 text 存在于数据库中，那么如果< / b> text 存在数据库停止提交表单并在 p 标记显示错误

Answer 1

通过form submission algorithm，使用submit()方法提交表单时，不会执行验证。这个想法或多或少是，当您提交带有脚本的表单时，您的脚本也应该执行任何必要的检查。

在您的脚本中，您可以调用checkValidity()方法执行正常验证，如果使用提交按钮提交表单将执行该验证。请注意，它仅执行静态验证。

html中文本框上的必需属性不起作用

1 个答案: