输入表单验证错误消息 [英] Input form validation error messaging

问题描述

我有3个输入字段被检查并且按钮变为启用状态。但是，如果条件无效，我想标记自定义错误消息。



我尝试过：

I have a 3 input fields that get checked and button becomes enabled. However i want to flag custom error messaging if criteria is not valid.

What I have tried:

 .textinput {
    
            border: 1px solid #000;
            border-radius: 0;
            box-sizing: border-box;
            color: #6c6c6c;
            height: auto;
            margin: 0px auto 15px auto;
            padding: 4px 0 5px 10px;
            width: 100%;
            font-family: Apercuregular,sans-serif;
            font-weight: normal;
            letter-spacing: .02em;
            font-size: 16px;
            display: block;
             width: 300px;
  }
  
   .form-button{
    background-color: #000;
    color: #fff;
    display: block;
    letter-spacing: .02em;
    font-family: Apercuregular,sans-serif;
    font-size: 13px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    padding: 1.2em 2em 1.2em 2em;
    width: 275px;
    margin: 25px auto 25px auto;
    border: 1px solid #000;
    outline: none;
  }
  .form-button[disabled],
    .form-button[disabled]:hover {
        background-color: red;
        color: #fff;
        border: 0 none;
    }

  
  
  .fieldLabel {
    display: block;
    font-size: 13px;
    font-family: Apercuregular,sans-serif;
    letter-spacing: .02em;
    text-align: left;
    width: 100%;
    line-height: 17px;
  }
  
   input[type="checkbox"]{
  display: none;
}

 
input[type="email"]  {
   -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }

<div id="container_COLUMN1">
                    <input type="text" name="First Name" id="control_COLUMN1" label="First Name" class="textinput mandatory" placeholder="First name*" required labeltext="First name*" maxlength="50" mandatory="true" onblur="valid();" />
                </div>
                
                <div id="container_COLUMN2">
                    <input type="text" name="Last Name" id="control_COLUMN2" label="Last Name" class="textinput mandatory" placeholder="Last name*" required labeltext="Last name*" maxlength="50" mandatory="true" onblur="valid();" />
                </div>
                
                <div id="container_Email">
                    <input type="text" name="Email" id="control_COLUMN3" label="Email" class="textinput mandatory" placeholder="Email*" required labeltext="Email*" maxlength="50" mandatory="true" onblur="valid();" />
                </div>
              
             
                
                <div>
                  <button type="submit" disabled class="defaultText form-button" id="submitBtn" value="Enter Now">Enter Now</button>
                </div>

                function valid(){
  var fn = document.getElementById('control_COLUMN1').value;
  var ln = document.getElementById('control_COLUMN2').value;
  var em = document.getElementById('control_COLUMN3').value;
  var name = /^[A-Z]?[a-z]*(\s[A-Z][a-z]*)*$/;
  var email = /^[a-z0-9]+\@[a-z0-9]+\.[a-z]+/;
  if(email.test(em) && name.test(fn) && name.test(ln))
    document.getElementById('submitBtn').disabled=false;
  else
    document.getElementById('submitBtn').disabled=true; 
}

推荐答案

/;
var email = /^[a-z0-9]+\@[a-z0-9]+\。[az] +/ ;
if （email.test（em）&& name.test（fn）&& name.test（ln））
document .getElementById（' submitBtn' ）.disabled = false ;
else
document .getElementById（' submitBtn'）。disabled = true ;
}

/; var email = /^[a-z0-9]+\@[a-z0-9]+\.[a-z]+/; if(email.test(em) && name.test(fn) && name.test(ln)) document.getElementById('submitBtn').disabled=false; else document.getElementById('submitBtn').disabled=true; }

首先使用正确的输入类型，然后添加 模式属性 [ ^ ]到你的名字输入，以便浏览器验证它们：

Start by using the correct input type, and adding the pattern attribute[^] to your name inputs, so that the browser will validate them:

<input type="text" name="First Name" id="control_COLUMN1" label="First Name" class="textinput mandatory" placeholder="First name*" required maxlength="50" pattern="[A-Z]?[a-z]*(\s[A-Z][a-z]*)*" />
...
<input type="text" name="Last Name" id="control_COLUMN2" label="Last Name" class="textinput mandatory" placeholder="Last name*" required maxlength="50" pattern="[A-Z]?[a-z]*(\s[A-Z][a-z]*)*" />
...
<input type="email" name="Email" id="control_COLUMN3" label="Email" class="textinput mandatory" placeholder="Email*" required maxlength="50" />

然后，添加jQuery Validation Plugin [ ^ ]到您的页面，验证表格。

Then, add the jQuery Validation Plugin[^] to your page and validate the form.

<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="jquery.validate.js"></script>
<script>

（ function （）{

这篇关于输入表单验证错误消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！