Страница сбрасывается при подтверждении формы JavaScript при отправке

Question

Я изучаю JavaScript и выполнил простой проект по проверке формы.Но страница сбрасывается, когда я нажимаю кнопку.Но я хочу показать текст предупреждения, когда некоторые поля пусты. Но страница быстро перезагружается, когда я отправляю форму кнопкой.Он показывает текст предупреждения в течение нескольких миллисекунд и сбрасывает страницу.Пожалуйста, посмотрите на мой код и помогите мне его исправить. Я изучаю JavaScript.Поэтому, пожалуйста, помогите мне исправить это.

Создать учетную запись

<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

Используйте onsubmit = "return validate ();"в теге формы Вы пропустили возврат части в теге формы.Также добавьте возвращаемое значение в вашу функцию JavaScript.Верните true, только если все ваши условия выполняются.В противном случае верните false.Форма не будет отправлена, если вы вернете false.В противном случае он будет представлен.()