Проверка элемента формы с использованием jQuery

Question

Я пытаюсь создать страницу проверки, и мне нужно перестать говорить «Пожалуйста, заполните форму», когда текст вводится в текстовое поле. Мне нужно было только проверить, когда текстовые поля пусты

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="mailto:kyletab03@gmail.com" name="myForm" method="post" onsubmit="return validation();" enctype="text/plain">
  Name:
  <input type="text" name="name" id="name" /><br />
  Surname:
  <input type="text" name="surname" id="surname" /><br />
  Email:
  <input type="email" name="email" id="email" /><br />
  Message:
  <textarea name="Message" maxlength="3500"></textarea><br />
  <button id="submit" onclick="validation()">Submit</button>
</form>
<script>
  var name = $("#name").value;
  var surname = $("#surname").value;
  var email = $("#email").value;
  var comments = $("#comments").value;
  function validation() {
    if (name == "" || surname == "" || email == "" || comments == "") {
      document.myForm.name.setCustomValidity("Please fill out this field");
      document.myForm.surname.setCustomValidity("Please fill out this field");
      document.myForm.email.setCustomValidity("Please fill out this field");
      document.myForm.comments.setCustomValidity("Please fill out this field");
    } else {
      document.myForm.name.setCustomValidity();
      document.myForm.surname.setCustomValidity();
      document.myForm.email.setCustomValidity();
      document.myForm.comments.setCustomValidity();
    }
  }
</script>

Answer 1

Самый простой способ проверить формы с помощью jquery - использовать jquery validate.

Я бы определенно посоветовал вам НЕ использовать mailto непосредственно в URL-адресе вашей формы просто потому, что спам-боты и тому подобное может захватить вашу форму и попытаться использовать ее для рассылки спама. Я добавляю jquery проверку и капчу на все страницы для связи с нами, которые я создаю для клиентов.

$('#frmsendemail').validate({ // Send Email Form
    ignore: '.ignore',
    rules: {
        seFullname: {
            required: true,
            minlength: 2
        },
        seContact: {
            required: true,
            phonesUK: true,
        },
        seMail: {

            required: true,
            email: true
        },
        seMsg: {
            required: true
        },
        seCaptchaStatus: {
            required: function () {
                // verify the user response

                var thisresponse = grecaptcha.getResponse(seCaptcha);
                if (thisresponse == "") {
                    return true;
                } else {
                    return false;
                }
            }
        }
    },
    messages: {
        seFullname: {
            required: "Please Enter Your Name",
            minlength: jQuery.validator.format("Please ensure you enter a name more than {0} characters long.")
        },
        seContact: {
            required: "Please Enter a contact number",
            phonesUK: "Your Contact Numer should be in the format of: 07123 456 789 or 0123 123 4567",
            minlength: jQuery.validator.format("Your contact number should me at least {0} numbers.")
        },
        seMail: {
            required: "Please Enter Your Email Address",
            email: "Your email address should be in the format of "username@domain.com""
        },
        seMsg: "Please Enter A Message",
        seCaptchaStatus: "Please complete reCaptcha."
    },
    highlight: function (element) {
        var id_attr = "#" + $(element).attr("id");
        $(element).closest('.pure-form-control-group').removeClass('border-success icon-valid').addClass('border-error icon-invalid');
        $(id_attr).removeClass('glyphicon-ok icon-valid').addClass('glyphicon-remove icon-invalid');
    },
    unhighlight: function (element) {
        var id_attr = "#" + $(element).attr("id");
        $(element).closest('.pure-form-control-group').removeClass('border-danger icon-valid').addClass('border-success icon-valid');
        $(id_attr).removeClass('glyphicon-remove icon-invalid').addClass('glyphicon-ok icon-valid');
    },
    showErrors: function (errorMap, errorList) {

        $(".seerrors").html('<h6><i class="fa fa-exclamation-circle"></i>&nbsp;Your form contains ' +
            this.numberOfInvalids() +
            ' errors, see details below.</h6');
        this.defaultShowErrors();
    },
    validClass: "border-success",
    invalidClass: "border-danger",
    errorClass: "border-danger",
    errorElement: 'div',
    errorLabelContainer: ".seerrors",
    submitHandler: function () {

        //Now that all validation is satified we can send the form to the mail script.
        //Using AJAX we can send the form, get email sent and get a response and display a nice
        //message to the user saying thank you.
        //For Debugging
        //console.log("Sending Form");

        $.post("../php/sendemail.php", $('#frmsendemail').serialize(), function (result) {
            //do stuff with returned data here
            //result = $.parseJSON(result);
            console.log(result.Status);

            if (result.Status == "Error") {
                //Create message from returned data.
                //This helps the user see what went wrong.
                //If its a form error they can correct it, 
                //if not then they can see whats wrong and alert us.


                var message3 = '<p style="font-size:10pt;text-align:left !important;">We encountered an error while processing the information you requested to send.</p><p style="font-size:10px;text-align:left;">We appologise for this, details of the error are included below.<p><hr><p style="text-align:left;font-size:10px;">Error Details:' + result.Reason.toString() + '</p><pstyle="text-align:left;font-size:10px;">If this error persists, please email enquiries@cadsolutions.wales</p>';
                // Show JConfirm Dialog with error.
                $.confirm({
                    title: '<h2 style="text-align:left"><i class="fa fa-exclamation-circle"></i>&nbsp;We encountered an error<h2>',
                    content: message3,
                    type: 'red',
                    // Set Theme for the popup
                    theme: 'Material',
                    typeAnimated: true,
                    buttons: {
                        close: function () {}
                    }
                });

Приведенный выше код взят со страницы, которую я создал для сценария «Связаться с нами». сценарий устанавливает все входы, которые есть на странице, с помощью атрибута name =, а затем устанавливает сообщения для входов, когда правила проверки не выполняются, выделяет и снимает выделение полей с ошибками, показывает сообщения об ошибках в установленном теге div, а затем обрабатывает отправку формы, когда форма действительна. :)

Answer 2

в вашем коде отображается ошибка, потому что в последней строке вы используете «комментарии» вместо «Сообщение», также setCustomValidity () принимает строку с сообщением об ошибке или пустую строку, и для ее правильной работы рассмотрите возможность использования document методы для получения элементов, кроме того, вам нужно будет добавить reportValidity (), чтобы ваш код должен был выглядеть так

    if (name == "" || surname == "" || email == "" || comments == "") {
    name=document.getElementById('name')
    name.setCustomValidity("Please fill out this field");
    name.reportValidity()
}
else
    name.setCustomValidity('');
    name.reportValidity()

также вы можете рассмотреть возможность использования вспомогательной функции для динамического использования идентификатора элемента

Обновление: вы можете использовать это, оно будет работать

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="mailto:kyletab03@gmail.com" name="myForm" method="post" id='myform' enctype="text/plain">
  Name:
  <input type="text" name="name" id="name" required="required"/><br />
  Surname:
  <input type="text" name="surname" id="surname" required="required" /><br />
  Email:
  <input type="email" name="email" id="email" required="required" /><br />
  Message:
  <textarea name="Message" id="message" maxlength="3500" required="required"></textarea><br />
  <button onlclick='validation()'>Submit</button>
</form>
<script>

function validate(inputID)
{
 var input = document.getElementById(inputID);
 var validityState_object = input.validity;
 if (validityState_object.valueMissing)
 {
  input.setCustomValidity('Please fill out this field');
  input.reportValidity();
 }
 else
 {
  input.setCustomValidity('');
  input.reportValidity();
 }
}
   function validation() {
   var name= document.getElementById('name').value
   var surname=document.getElementById('surname').value
   var email=document.getElementById('email').value
   var message=document.getElementById('message').value  

      validate('name') 
      validate('surname') 
      validate('email') 
      validate('message') 

 if (name!=''&&surname!=''&&email!=''&&message!='') {       
          $('#myform').submit();

    }   
}

</script>