代码之家 › 专栏 › 技术社区 › Dong

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

bootstrap-modal message html php javascript

Dong · 技术社区 · 9 年前

如果文本字段为空,则显示错误消息时出现问题。我想要一个简单的信息,如“不能是空的”。一旦用户单击提交按钮,并且有几个空白文本字段,则系统应在文本字段下方显示错误消息“不能为空”,文本字段也应变为红色。

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

这是我的表格:

<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();
});

2 回复 | 直到 9 年前

Dawid Urbanski 9 年前

您应该使用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>

MagJS 9 年前

如果您对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>

下面是工作示例的链接: http://jsbin.com/kohomupuhu/1/edit?html,js,output

希望这有帮助!