Page Resets When JavaScript Form Validation on submit

Question

I am learning JavaScript and did a simple project in form validation. But the page resets when I click the button. But I want to show some alert text when some fields are empty.But the page resets quickly when I submit the form with the button. It shows the alert text for few milliseconds and resets the page. Please look at my code and help me to fix it.I am learning JavaScript. So please help me to fix it.

Create Your Account

<style>

    body  {background-color: darksalmon;}

    h1  {text-align: center;
         font-family: sans-serif;
         color:darkcyan;
         margin-top: 75px;
    }

    #container  {width: 270px;
                 height: 500px;
                 position: relative;
                 margin: auto;
                 font-family:sans-serif;
                 font-weight: bold;
                 color:dimgray;
    }

    #myButton   {position:relative;
                 width: 125px;  
                 height: 40px;
                 left: 70px;
                 background-color:aquamarine;
                 border: 1px solid dimgray;
                 font-family: sans-serif;
                 font-weight: bold;
                 color: dimgray;
    }

    #myButton:hover {background-color: dimgray;
                    color: aquamarine;
    }

    .paraStyle  {
            font-size: 12px;
            margin-left: 95px;
            color: red;
            display: none;
    }

</style>

<h1>Create Your Account Here</h1>
<div id="container">

    <form name="form1" onsubmit="validate()"  id="myForm">

    First Name: <input type="text" name="firstName">
    <br>
    <p class="paraStyle" id="para1">This Field Is Required</p>
    <br>
    Last Name: <input type="text" name="lastName">
    <br>
    <p class="paraStyle" id="para2">This Field Is Required</p>
    <br>
    Email&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;<input type="email" name="email">
    <br>
    <p class="paraStyle" id="para3">This Field Is Required</p>
    <br>
    Phone&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;<input type="text" name="phone">
    <br>
    <p class="paraStyle" id="para4">This Field Is Required</p>
    <p class="paraStyle" id="para7">Please Enter phone Number In Format</p>
    <br>
    Password&nbsp;:&nbsp;<input type="password" name="password1">
    <br>
    <p class="paraStyle" id="para5">This Field Is Required</p>
    <p class="paraStyle" id="para8">Password Must Be Atleast 5 Charactors</p>
    <br>
    Re-Enter&nbsp;&nbsp;&nbsp;:&nbsp;<input type="password" name="password2">
    <br>
    <p class="paraStyle" id="para6">This Field Is Required</p>
    <p class="paraStyle" id="para9">Please Enter The Same Password</p>
    <br>
    <br>
    <button type="submit" id="myButton">Create Account</button>
    </form>



    <script type="text/javascript">

            e=document.form1.password1.value;
            f=document.form1.password2.value;

        function validate() {
            x=document.form1.firstName.value;
            y=document.form1.lastName.value;
            z=document.form1.email.value;
            b=document.form1.phone.value;
            c=document.form1.password1.value;
            d=document.form1.password2.value;

            if(x==""){
            document.getElementById("para1").style.display="block"
            }

            if(y==""){ 
            document.getElementById("para2").style.display="block"}

            if(z==""){
            document.getElementById("para3").style.display="block"}

            if(b==""){
            document.getElementById("para4").style.display="block"}

            else if(isNaN(b)){
            document.getElementById("para7").style.display="block"}

            else if(b.length !=10){
            document.getElementById("para7").style.display="block"}

            if(c==""){
            document.getElementById("para5").style.display="block"}

            else if(c.length <=5){
            document.getElementById("para8").style.display="block"}

            else if(d==""){
            document.getElementById("para5").style.display="block"}

            else if(e==f){document.getElementById("para9").style.display="block"}


        }


    </script>


</div>

Answer 1

Use onsubmit="return validate();" in your form tag You have missed return part in your form tag. Also add return value in your javascript function. Return true only if your all conditions come true. Otherwise return false. Form will not submit if you return false. Otherwise it will submit. ()