Member 13026670 Ответов: 2

Сообщение об ошибке проверки формы ввода

У меня есть 3 поля ввода, которые проверяются, и кнопка становится включенной. Однако я хочу отметить пользовательские сообщения об ошибках, если критерии недопустимы.

Что я уже пробовал:

 .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; 
}

CHill60

Так что же не так с вашим кодом?

Member 13026670

ничего плохого в текущей версии нет, но я не уверен, как применить сообщения об ошибках?

2 Ответов

Рейтинг:
2

Richard Deeming

Начните с использования правильного типа ввода и добавления то pattern атрибут[^] для ввода вашего имени, чтобы браузер проверил их:

<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[^] на вашу страницу и подтвердите форму.
<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(){
    $("form").validate();
});
</script>

Рейтинг:
2

Member 13030103

Вы можете добавить один пустой тег div в верхнюю часть формы, как показано ниже:

<div id="error"></div>


Затем обновите другую часть javascript, как показано ниже: 

 if(email.test(em) && name.test(fn) && name.test(ln))
    document.getElementById('submitBtn').disabled=false;
  else
    document.getElementById('error').innerText = "Please fill all data";
    document.getElementById('submitBtn').disabled=true;

}


Я надеюсь, что все вышесказанное сработает.