Как я могу использовать Javascript для проверки ошибок HTML-формы, в том числе проверки правильности заполнения полей? - PullRequest
Новая
       13

Как я могу использовать Javascript для проверки ошибок HTML-формы, в том числе проверки правильности заполнения полей?

1 голос
/ 03 октября 2019

Я пытаюсь создать форму на веб-странице, где Javascript / Jquery будет выполнять проверку формы на стороне клиента. Мне нужно, чтобы он не только проверял, заполнены ли обязательные поля, но и правильно ли они заполнены (т. Е. Номера телефонов отформатированы 000-000-0000, в письмах есть @ example.com в конце и два имени вводятся вполе имени). Я пытался найти пример кода в Интернете, но код, который я нашел, в основном сломал то, что у меня уже было. Вот код для одного поля формы:

HTML: 

    <div class="contactForm">
      <label for="phone">Phone: </label>
      <div id="errorphone" class="error"></div>
      <input type="phone" name="phone" id="phone" placeholder="000-000-0000" required>
    </div>

Javascript: 

    $("document").ready(function(){
      console.log("Loaded");
      $("#submit").click(function(){
        checkPhone();
      });

    $("#phone").change(function(){
      console.log("Something in phone changed");
      checkPhone();
    });

    function checkPhone(inputtxt){
      var phoneno = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
      if($.trim($("#phone").val())==""){
        $("#errorphone").html("<p>You missed your phone number</p>");
        $("#errorphone").addClass("showerror");
      }
      else if((inputtxt.value.match(phoneno)==false){
        $("errorphone").html("<p>Please enter your number in the format 000-000-0000</p>");
        $("#errorphone").addClass("showerror");
      }
      else{
        $("#errorphone").html("");
        $("#errorphone").removeClass("showerror");
      }
    }

Javascript использовал для работы, чтобы проверить, было ли поле пустым или нет, но когда я попытался добавить код, чтобы проверить правильность форматирования, все Javascript прекратил работать. Вот моя оригинальная функция checkPhone, прежде чем я попытался добавить проверку форматирования: 

    function checkName(){
      if($.trim($("#name").val())==""){
        $("#errorname").html("<p>You missed your name</p>");
        $("#errorname").addClass("showerror");
      }
      else{
        $("#errorname").html("");
        $("#errorname").removeClass("showerror");
      }
    }

Я использую Sublime, а оператор else в текущем Javascript не окрашен должным образом, поэтому я предполагаю, чтоПроблема может быть связана с синтаксисом, потому что кажется, что оператор else больше не распознается. Но, честно говоря, я даже не уверен, правильно ли я отформатирую валидацию, и уверен, что есть более простой способ сделать валидацию полностью. Я также заметил, что текущая версия checkPhone имеет inputtxt в качестве условия, но тип ввода для поля указан как phone. Может быть, в этом проблема?

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

Ответы [ 4 ]

1 голос
/ 03 октября 2019 
else if((inputtxt.value.match(phoneno)==false){

в этой строке отсутствует закрывающая скобка

0 голосов
/ 03 октября 2019

В основном вам нужно получить значение элемента и передать его в вашу функцию проверки. В обработчиках событий ключевое слово this - это элемент, из которого запускается событие.

Изменить 

 $("#phone").change(function(){
      console.log("Something in phone changed");
      checkPhone();
    });

На 

 $("#phone").change(function(){
      console.log("Something in phone changed");
      //Pass the value of the element to the function
      checkPhone(this.value);
  });
0 голосов
/ 03 октября 2019

Как я уже отмечал в комментариях, я рекомендую плагин проверки jquery . Ниже описано, как вы могли бы проверить свой номер телефона с помощью плагина. Если вы прочитаете документацию, вы увидите, что есть много примеров. Вот демоверсия: https://jsfiddle.net/6gojrte2/

HTML-разметка: 

    <form id="myform">
        <label for="phone">Phone: </label>      
        <input name="field" placeholder="000-000-0000"><br/>
        <input type="submit" value="Validate!">
    </form>

Необходимые скрипты 

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script>

$(document).ready(function () {

    $( "#myform" ).validate({
      rules: {
        field: {
          required: true,
          phone: true     
        }
      }
    });

    jQuery.validator.addMethod("phone", function (phone_number, element) {
            phone_number = phone_number.replace(/\s+/g, "");
            return this.optional(element) || phone_number.length > 9 &&  phone_number.match(/^\(?[\d\s]{3}-[\d\s]{3}-[\d\s]{4}$/);
    }, "Invalid phone number");

});
</script>

Однако, если вы не хотите использовать плагин,вот решение вашей проверки. Я исправил несколько ошибок. 

<script>

 $("document").ready(function(){

      $("#submit").click(function(){
        checkPhone($('#phone').val());
      });
 });

    $("#phone").keyup(function(){      
      checkPhone($('#phone').val());
    });

    function checkPhone(inputtxt){

      var phoneno = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
      if($.trim($("#phone").val())==""){          
        $("#errorphone").html("<p>You missed your phone number</p>");
        $("#errorphone").addClass("showerror");
      }
      else if((inputtxt.match(phoneno))==false || inputtxt.length < 12){          
        $("#errorphone").html("<p>Please enter your number in the format 000-000-0000</p>");
        $("#errorphone").addClass("showerror");
      }
      else{       
        $("#errorphone").html("");
        $("#errorphone").removeClass("showerror");
      }
    }

</script>
0 голосов
/ 03 октября 2019 
<input type="phone" pattern="^\+?\d{0,13}" title="You missed your phone number" name="phone" id="phone" placeholder="000-000-0000" required>
...