Question

我想做一个验证注册表格。如何在输入底部的跨度中显示输入为空的错误？我希望该跨度不存在并创建为显示消息。

enter code here

<form action="" name="reg-form" method="post">
    <div id="name-box" onblur="validateFullname()" class="form-holder">
        <input type="text" name="name"  placeholder="enter name" id="name" class="form-control">

    </div>

我想创建一个span元素并在输入或附加到div后显示消息。

Answer 1

您最好的选择是使用JQuery Validation。它的内置方法从技术上讲不会使用您指定的范围，但是您可以轻松地使用自己的函数来取消隐藏您创建的自定义范围。或者，更好的是，只需按照自己喜欢的方式设置其错误消息<label>的样式。

这是一个仅使用JQuery验证的示例：

<form action="/" method="post" id="commentForm">
    <div class="form-holder">
      <input type="text" name="username" placeholder="username" class="form-control">
    </div>

    <div class="form-holder col-12">
      <input type="email" name="email" placeholder="email" class="form-control">
    </div>
  </form>

  <script>
    var validator = $("#commentForm").validate();
    validator.showErrors({
      "email": "Please enter a valid email address"
    });
  </script>

（该示例省略了JQuery和JQuery Validation的包含内容。）

Answer 2

解决方案如下所示：

标识“错误消息”跨度的显示位置。它必须位于另一个元素内，即使该元素是主体。我的示例包含：<div id="ErrMsg"></div>
您需要一个事件来触发验证和错误跨度的创建。通常，该事件是按下按钮。因此，在本示例中，我们继续进行以下操作：

$('#mybutt').click(function(){
    var tmpL = $('#login').val();
    var tmpP = $('#pword').val();
    if( tmpL=='' || tmpP=='' ){
      $('#ErrMsg').html('<span>Please fill-out all fields</span>');
    }else{
      alert('Logging in now');
    }
});

$('input').on('keyup', function(){
  if ( $('#ErrMsg span').length ) $('#ErrMsg span').remove();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="LoginDIV">
  <div id="LName">
    Login: <input id="login" type="text" />
  </div>
  <div id="LPass">
    Pword: <input id="pword" type="password" />
  </div>
  <div id="ErrMsg"></div>
  <div id="btnDIV"><button id="mybutt">Login</button></div>
</div>

注意：引用jQuery库的<script>标签是使用jQuery所需的全部。 jQuery只是使javascript变得更容易，更一致且所需的键入更少。

如何在表单验证中使用create元素显示错误消息？

2 个答案: