Categories
Development

Please advise Required not working on more then one input

I am having a really weird issue.

Below I have two input fields that require input. On submit it requires the email field however if you press submit without entering the phone number not only does it not require input but it breaks the form. I appercaite any input.

Thanks

    <html>

<form action="submit.php" method="post">


                        <input type="email" style="width: 80% !important;" id="email" value="" placeholder="Your Email" required />
                        <p class="emailRequired">Oops! Valid email is required.</p>
                        <br />
                        <p class="quick">Quick Fill<br />
                            <button id="gmail" class="small-btn quickfill">@gmail.com</button>
                            <button id="yahoo" class="small-btn quickfill">@yahoo.com</button>
                        </p>


                        <p class="question">Mobile Phone</p>
                        <p class="question_text">Optional.</p>
                        <input type="tel" style="width: 80% !important;" name="phone_number" id="phone_number" value="" placeholder="+1" required />
<label for="phone_number">

<input type="submit" class="button checkEmail urlPrep">

</form>

    <script>
    $(":input").inputmask();

    $("#phone_number").inputmask({"mask": "(999) 999-9999"});
    </script>

    <script>

    var elements = document.getElementsByTagName("INPUT");
    for (var i = 0; i < elements.length; i++) {
        elements[i].oninvalid = function(e) {
            e.target.setCustomValidity("");
            if (!e.target.validity.valid) {
                e.target.setCustomValidity("This field cannot be left blank");
            }
        };
        elements[i].oninput = function(e) {
            e.target.setCustomValidity("");
        };
    }

    </script>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *