我们如何将验证应用于WordPress插件的任何字段

Question

This is my website URL http://saloon.ekvitech.com/schedule-appointment/ on this page I am using a 'easy-appointment-plugin' of WordPress to book an appointment. Here when you fill the appointment form step by step then you are towards to personal information form. When you fill this then the form is submitted for review by admin. But the problem is in that form there is a phone field and that field was accepting alphabet as well as digits. This should be not done with the phone as we know that phone number will accept only digits.

So I need to validate this field with digits only. If someone enters alphabets then error message arrises digits only.

I applying my code in the "header.php" file, I am stuck with my script code because the fields are autogenerated by WordPress plugin and all fields have same class how we can achieve this and validate should be done on single filed i.e. on phone field only.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>
jQuery(document).ready(function () {
  //called when key is pressed in textbox
  jQuery(".custom-field").keypress(function (e) {
     //if the letter is not digit then display error and don't type anything
     if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
        //display error message
        jQuery(".col-sm-8").html("Digits Only").show().fadeOut("slow");
               return false;
    }
   });
});
</script>

Note: My script will hide all fields don't know why. Please help me out form this sticky situation.

Many Thanks!

</div>

Answer 1

try this code:

jQuery(document).ready(function () {
  //called when key is pressed in textbox
  jQuery(document).on("keypress","input[name='phone']",function (e) {
     //if the letter is not digit then display error and don't type anything
     if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
        //display error message
        alert('number only');
               return false;
    }
   });
});