通过jQuery提交表单时,必需的不起作用?

时间:2016-12-20 11:04:42

标签: javascript jquery html forms

场合

我有一个包含所需输入的表单。它曾经工作,但自从我使用JavaScript / jQuery提交表单后,不再需要必填字段。

问题

如何在使用JavaScript / jQuery对表单进行总结时,是否需要输入字段?

HTML

<fieldset>
<div class="form-group form-group-sm">
    <label class="col-md-3 control-label">Name:</label>
    <div class="col-md-6">
        <input required name="ttlAddCategory" id="frmAddCategoryTtl" placeholder="" class="form-control input-md col-md-6" type="text" value="">
    </div>
</div>
<div class="form-group form-group-sm">
    <label class="col-md-3 control-label">Icon:</label>
    <div class="col-md-6">
        <input name="iconAddCategory" id="frmAddCategoryIcon" placeholder="Upload uw Marker en plaats hier uw URL. Max. 70x70 Aangeraden 33x44" class="form-control input-md col-md-6" type="text" >
    </div>
</div>
<div class="form-group form-group-sm">
    <label class="col-md-3 control-label">&nbsp;</label>
    <div class="col-md-3">
        <input type="button" class="btn btn-primary" value="Toevoegen" id="btnAddCategory">
    </div>
    <div class="col-md-4">
        <a id="cke_29" class="btn btn-primary" title="Afbeelding" tabindex="-1" role="button" aria-labelledby="cke_29_label" aria-haspopup="false" onkeydown="return CKEDITOR.tools.callFunction(23,event);" onfocus="return CKEDITOR.tools.callFunction(24,event);" onclick="CKEDITOR.tools.callFunction(25,this);return false;">
            Upload hier
        </a>
    </div>
</div>
</fieldset>

JS

    $('#btnAddCategory').click(function() {
        if ($('#frmAddMarkerCat').find('input[name="iconAddCategory"]').val() == '') {
            $('#frmAddMarkerCat').find('input[name="iconAddCategory"]').val('default');
        }

        $('#frmAddMarkerCat').submit();

    });

2 个答案:

答案 0 :(得分:2)

如果手动提交表单就可以了,而不是在表单对象上执行.submit()尝试通过触发用于手动提交的按钮的单击来复制手动操作。

而不是:

$('#formID').submit();

尝试:

$('#submitButton').trigger('click');

答案 1 :(得分:0)

就像@Barmar已经说过的那样:&#34;如果您使用Javascript提交表单,则必须自己进行输入验证。&#34;

具有自定义所需验证的简单版本的代码如下所示:

var $iconAddCategory = $('#frmAddMarkerCat').find('input[name="iconAddCategory"]');

$('#btnAddCategory').click(function() {
  if ($iconAddCategory.val() === '') {
    $iconAddCategory.val('default');
  }

  validate(function() {
    $('#frmAddMarkerCat').submit(); 
  });
});


function validate(callback) {
  var emptyCount = 0;

  $("#form").find('input[required]').each(function(index, element) {
    var $element = $(element);

    if ($element.val() === '') {
      emptyCount++;
      $element.addClass('error');
    }
  });

  if (emptyCount === 0) {
    callback();
  } 
}

http://jsbin.com/wiwodekene/edit?html,js,output