how to avoid page refresh when user types in invalid form input

user_15765105 0
Viewed 65

I have a simple "contact me" section on my website and I'm trying to figure out how to prevent the page on refreshing when a user enters in an invalid email. Reason why I want to prevent this is because when they enter in an invalid email the page refreshes and brings them to the top of the page. I have an error that displays what the user missed but they have to scroll back down to the contact section to see it. I'm not sure how to go about preventing the page from scrolling to the top after they submit. All I have right now is a simple php form validation. Any suggestions? would this be done with JavaScript? or can I add this to my existing php validation script? not sure where to start. thanks!

Side note i am using PHP for form validation.

FIXED! To prevent the page from going back to the top i removed "index.php" from my form action:

before

<form action="index.php" method="POST">

after

<form action="" method="POST">

now the page does not refresh and does not go to the top of the page.

html php jquery javascript
2 Answers

It depends on what you mean by an invalid email. If you are referring to the format then something like this is what you should be using, and the browser will check the email for you.

        <label for='idEmail' class="required">Your email address</label>
        <input type='email' name='inpEmail' id='idEmail' class='full_width'
         maxlength='100' autocomplete='email' value=''>

The critical bit is making the input as type email

user_47794720

The commenter above means

e.preventDefault(). 


     const handleSubmit = (e) => {
        e.preventDefault();
        alert("you just clicked the button").
     }
    
    <form onSubmit={handleSubmit}>
         <button type="submit" onClick={onSubmit}>Click Me</button>
    </form>

Including that e.preventDefault() keeps the page from reloading.

//Edit Tried to paste in code from a site, but SO is giving me a hard time about the formatting. It was my first ever website so it's not the prettiest. Here is the link to the GitHub: https://github.com/LazAustin/AldenForCongress/blob/main/contact.php

Lines 1-66 are the PHP code. Line 192 is where the form body starts (JS and Bootstrap). Line 251 is some JS code to check for inputs.

Hope this helps

user_123333670
Related