Question

我对训练有点新意，所以对我很温柔lol ......

我有一个很长的表格，可能有十几个字段需要验证。这一切都很完美。

但是在手机上，当表单无法提交时，提交按钮变为＆＃34;禁用＆＃34;我希望警告显示在“提交按钮”区域的上方/下方，警告用户他们将强制字段留在a = a以上，以便他们可以向上滚动并解决这些问题......

此示例位于jsfiddle

非常适合展示我想要的东西。

如果您点击＆＃34;提交＆＃34;如果没有填写任何字段，您将收到字段提醒。我的确如此。

我想要一个＆＃34;警告提示＆＃34;引导消息框通过该提交按钮显示，通知用户在提交之前填写上面的字段＆＃34;再次＆＃34;

我对如何做到这一点感到茫然。我以为我有一个表格样本显示＆＃34;成功＆＃34;但突然间无法在任何地方找到它。我的微弱代码尝试都失败了。

搜索一直指向由文本字段放置的警报，我已经做得很好。

arghhh

＆＃13;

$('form').validate({
  rules: {
    fname: {
      minlength: 3,
      maxlength: 15,
      required: true
    },
    lname: {
      minlength: 3,
      maxlength: 15,
      required: true
    }
  },
  highlight: function(element) {
    var id_attr = "#" + $(element).attr("id") + "1";
    $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
    $(id_attr).removeClass('glyphicon-ok').addClass('glyphicon-remove');
  },
  unhighlight: function(element) {
    var id_attr = "#" + $(element).attr("id") + "1";
    $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
    $(id_attr).removeClass('glyphicon-remove').addClass('glyphicon-ok');
  },
  errorElement: 'span',
  errorClass: 'help-block',
  errorPlacement: function(error, element) {
    if (element.length) {
      error.insertAfter(element);
    } else {
      error.insertAfter(element);
    }
  }
});

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"></script>
<form class="form-horizontal">
  <div class="form-group has-feedback">
    <label for="fname" class="control-label col-md-6">First Name:</label>
    <div class="col-md-6">
      <input type="text" name="fname" id="fname" class="form-control" placeholder="Enter first name" />
      <span class="glyphicon form-control-feedback" id="fname1"></span>
    </div>
  </div>
  <div class="form-group has-feedback">
    <label for="lname" class="control-label col-md-6">Last Name</label>
    <div class="col-md-6">
      <input type="text" name="lname" id="lname" class="form-control" placeholder="Enter last name" />
      <span class="glyphicon form-control-feedback" id="lname1"></span>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

＆＃13;

Bootstrap表单上的提交按钮发生故障警报

0 个答案: