Question 285368 in Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress – mask for entering numbers in the form

There is a contact form on wordpress, This jQuery makes the send button unavailable until the data is filled in, how to make a mask, the minimum number of digits when filling in, I use 2 fields, name and tel

jQuery(document).ready(function($){
    $('.wpcf7-form').each(function () {
        let form = $(this);
        $(form).find('input[type=submit]').prop('disabled', true);
    });

    $(document).on('keyup', '.wpcf7-form input', function () {
        let form = $(this).parents('.wpcf7-form');
        let err = 0;
        
        $(form).find('.wpcf7-form-control').not('input[type=submit]').each(function () {
            if ($(this).val() == '') {
                err++;
            }
        })

        if (err > 0) {
            $(form).find('input[type=submit]').prop('disabled', true);
        }else{
            $(form).find('input[type=submit]').prop('disabled', false);
        }
    })
})

Nothing is working out yet

Tags:

2

Answers


  1. 0

    Just use <input type="tel"> as input for the telephone number. Then add the required attribute to that input. required will only allow the submission of the form if all required fields are filled. If one of the required fields is not filled, the form will throw an error by default:

    <form>
  <label for="name">Name: </label>
  <input type="text" id="name" required>
  
  <br>
  
  <label for="phone">Telephone: </label>
  <input type="tel" id="phone" required>
  
  <br>
  
  <input type="submit">
</form>
    Login or Signup to reply.
  2. 0

    To be sure that you are using the right element in loop, you rather use a var and set the value with $(this). Even more when you loop inside an event.

    To get the correct value of input text, you need to use trim function that will remove empty space.

    I commented my code.

    jQuery(document).ready(function($){
    $('.wpcf7-form').each(function () {
        let form = $(this);
        $(form).find('input[type=submit]').prop('disabled', true);
    });

    $(document).on('keyup', '.wpcf7-form input', function () {
        let form = $(this).parents('.wpcf7-form');
        
        // set var to false by default
        let err = false;
        
        // lets loops on all input not type submit in .wpcf7-form
        $('.wpcf7-form input:not([type=submit])').each(function () {
            var $thisInput = $(this); // set a var with $(this) to be sure to get the right element
            var thisInputVal = $.trim($thisInput.val()); // get the val and remove empty space
            var thisInputName = $thisInput.attr("name"); // get name attribute of current input
            var thisInputLength = thisInputVal.length; // get the length of current input
            
            //console.clear();
            //console.log(thisInputName + " - " + thisInputVal + " - " + thisInputLength); // debug

            // if we find element that is empty then we set err var to true
            // or if length of telephone is < 10 then we set err var to true
            if (thisInputVal == '' || thisInputName === "telephone" && thisInputLength < 10) {
                err = true;
            }
        })
        
        //console.log(err); // debug

        if (err === true) {
            $(form).find('input[type=submit]').prop('disabled', true);
        } else {
            $(form).find('input[type=submit]').prop('disabled', false);
        }
    })
})
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="wpcf7-form">
  <label for="name">Name: </label>
  <input type="text" id="name" name="name">
  
  <br>
  
  <label for="telephone">Telephone: </label>
  <input type="tel" id="phone" name="telephone">
  
  <br>
  
  <input type="submit">
</form>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search