如何使用 Javascript 验证表单字段

Question

I am trying to validate my form phone field to prevent users from entering the same numbers in my javascript.

If the number provided by the user matches with the same numbers in my javascript, They will get a warning and the form would not submit.

However, I noticed that my code below shows the warning whether the numbers match or not.

I need corrections to know what I am doing wrong. Thanks.

Code below;

 $('.validate').hide(); $('body').on('blur', '#phone', function() { $('.validate').hide(); isphone($(this).val()); }); function isphone(phone) { if (phone === "1234" || phone === "23456"){ $(".validate").show(); } else { $(".validate").hide(); } }

 <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <form action='' method='POST' id="submitForm" > <input type="phone" name='phone' required='' id="phone" placeholder="0000-000-0000"/> <div class="validate"><span style="color: red;"><b>Please enter a valid phone!</b></span></div> <button href='/' type='submit' id="submitForm">Process</button> </form>

Answer 1

I believe this should work. I move the changes for hiding and showing $('.validate') to the isphone function, and removed that done variable that wasn't doing anything useful (used if...else instead). Also, don't use document.getElementById if you're already using JQuery.

    $('.validate').hide();
    $('body').on('blur', '#phone', function() {
        $('.validate').hide();
        isphone($(this).val());
    });

    function isphone(phone) {
        if (phone === "1234" || phone === "23456"){
            $(".validate").hide();
        } else {
            $(".validate").show();
        }
    }