Question

我正在尝试设置所需的，如果没有输入，但它不起作用。

即使没有输入，该按钮仍可正常工作，并且不会显示所需的警报。

我如何解决这个问题，有人可以帮我解决这个问题！

Html -

<form id="searchform"> 
        <div style="padding: 0px 10px 0px 0px;" class="col-md-3">
            <input  type="text" id= "nameSearch" name="nameSearch" class="form-control" required >
        </div>
        <button type="submit" class="btn btn-default" id="submitSearch">
            <i class="fa fa-search"></i> {% trans %}Search{% endtrans %}
        </button>
    </form>

脚本 -

    $("#submitSearch").on('click', function () {
    var data = {};
    data['nameSearch'] = $('#nameSearch').val();

    $.ajax({
        url: '/hello/search',
        type: 'post',
        data: data,
        success: function (data) {
        ...........

Answer 1

请注意，添加required课程不会阻止您提交表单。

看起来您正在使用Bootstrap，它提供输入＆＃34;验证状态＆＃34;类，如has-error。但这只会改变输入的外观，而不是功能。见这里：http://getbootstrap.com/css/#forms-control-validation

查看HTML5表单验证：http://www.the-art-of-web.com/html/html5-form-validation/

并查看它是否适用于您正在使用的浏览器：http://caniuse.com/#feat=form-validation

Answer 2

添加一个小的匿名jQuery函数来检查表单的HTML5有效性状态..

(function( $ ){
    $.fn.isValid = function() {
        return checkValidity();
    };
})(jQuery);

然后在提交中使用此

$('#submitSearch').on('click', function(e) {

    if(this.isValid()){

    } else {

    } 

});

Answer 3

尝试在"中添加class="form-control"：

<form id="searchform"> 
    <div style="padding: 0px 10px 0px 0px;" class="col-md-3">
        <input  type="text" id= "nameSearch" name="nameSearch" class="form-control" required >
    </div>
    <button type="submit" class="btn btn-default" id="submitSearch">
        <i class="fa fa-search"></i> {% trans %}Search{% endtrans %}
    </button>
</form>

Answer 4

您的语录：

<input  type="text" id= "nameSearch" name="nameSearch" class="form-control required >
    </div>

见：

<input  type="text" id= "nameSearch" name="nameSearch" class="form-control" required >
    </div>

要求不起作用

4 个答案: