在空白文本字段中显示消息错误

Question

如果文本字段为空，我会在显示错误消息时遇到问题。我想要一条简单的消息，例如 "can't be empty"。一旦用户单击提交按钮并且有几个空白文本字段，那么系统应该在文本字段下方显示错误消息 "can't be empty"，并且文本字段也应该变成红色。

现在发生的事情是，当我点击提交按钮时，系统只关注空白文本字段，但没有错误消息，文本字段为蓝色。

这是我的表格：

<form id="myForm2" action="addnewreservation.php" method="post">
  <div class="panel panel-default is-header">
      <div class="panel-body">

        <table class="table table-bordered">
          <tbody>
            <tr>
                <td>Title </br>
                <input class="form-control" name="title" type="text"></br>
                <button class="btn btn-edit btn-sm pull-right" id="reserveroom" type="submit" name="submit">Book Meeting Room Now!</button>
                </td>
            </tr>
          </tbody>
        </table>

      </div>

  </div>
</form>

这是脚本：

$(document).ready(function(){
 $('#myForm2').formValidation({
    message: 'This value is not valid',
        icon:{
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields:{
            title: {
                validators: {
                    notEmpty: {
                        message: 'can\'t be empty'
                    }
                }
            }

        }
   })
});



 $('#myForm2').change(function(e) {
    $('reserveroom').focus();
});

Answer 1

您应该使用 jQuery 验证插件。它应该可以解决问题。

http://jqueryvalidation.org/

一些代码示例：

<form id="myForm2" action="addnewreservation.php" method="post">
    <div class="panel panel-default is-header">
      <div class="panel-body">

        <table class="table table-bordered">
          <tbody>
            <tr>
             <td>Title </br>
              <input class="form-control" name="title" type="text" required></br>
              <button class="btn btn-edit btn-sm pull-right" id="reserveroom" type="submit" name="submit">Book Meeting Room Now!</button>
             </td>
            </tr>
          </tbody>
        </table>

      </div>

    </div>
</form>

然后

$(document).ready(function(){
   $('#myForm2').Validate();
});

编辑：

当然不要忘记在调用 jQuery 脚本后立即包含插件文件

<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>

Answer 2

如果您对 jQuery 不是特别在意，这里还有另一种超级简单的方法来满足您的需求。

最主要的是错误信息和类的定义。

这是 MagJS 中的示例

JS：

var props = {
  message: 'can\'t be empty',
  title: ''
}

mag.module("validate", {

  view: function(state, props) {

    state.title = state.title || props.title;

    state.form = {
      _onchange: function() {
        this['submit'].focus()
      }
    }

    state.button = {

      _onclick: function() {

        if (state.title.length < 1) {

          state.error = {
            _text: props.message,
            _class: 'label error'
          }

          state.input = {
            _class: 'error'
          }

        }
      }
    }
  }
}, props)

HTML:

<div id="validate">
 <form id="myForm2" action="addnewreservation.php" method="post">
  <div class="panel panel-default is-header">
    <div class="panel-body">
      <table class="table table-bordered">
        <tbody>
          <tr>
            <td>Title </br>
              <input class="form-control" name="title" type="text">
              <span class="label error hide"></span>
              </br>
              <button class="btn btn-edit btn-sm pull-right" id="reserveroom" name="submit">Book Meeting Room Now!</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</form>

这是工作示例的 link：http://jsbin.com/kohomupuhu/1/edit?html,js,output

希望对您有所帮助！

在空白文本字段中显示消息错误

Showing messages error in a blank text field

html

javascript

php

message

bootstrap-modal