JavaScript form validation code errors

Question

Here is my code:

<!DOCTYPE html>
<head>
  <title>Tests</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf8'>

<script type="text/javascript">
      function closeSign(){

        document.getElementById('window_fler').style.display = 'none';      
        document.getElementById('wrap_fler').style.display = 'none'; 
      }

      function validate_fler(){

          if (document.forms["fler_form"]["signDate"].value.length == 0) { return false };
          if (document.forms["fler_form"]["signTime"].value.length == 0) { return false };
          if (document.forms["fler_form"]["signFIO"].value.length == 0) { return false };
          if (document.forms["fler_form"]["signPhone"].value.length == 0) { return false };

          document.getElementById('window_fler').style.display = 'block';      
          document.getElementById('wrap_fler').style.display = 'block';     
      }

    </script>

<style type="text/css">
  #wrap_fler{
    display: none;
    opacity: 0.8;
    position: fixed;
    background-color: rgba(1, 1, 1, 0.725);
    z-index: 100;
    overflow: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    padding: 16px;
  }

  #window_fler{
    height: 400px;
    width: 400px;
    display: none;
    z-index: 200;
    position: fixed;
    margin: 150px auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    padding: 30px;
    background: #fff;
  } 

</style>

</head>
<body>



  <form role="form" name="fler_form" action="" data-email-subject="Contact Form" data-show-errors="true">
                                       <div>
                                           <label for="dayTime1">Выберите дату:</label>
                                           <input name="signDate" type="text" placeholder="Пожалуйста, выберите дату" id="dayTime1" required>
                                       </div>
                                       <div>
                                           <label for="hourTime">Выберите время:</label>
                                           <select name="signTime" id="hourTime">
                                         <option>&nbsp;</option>
                                               <option value="10">10:00</option>
                                               <option value="11">11:00</option>
                                               <option value="12">12:00</option>
                                               <option value="13">13:00</option>
                                               <option value="14">14:00</option>
                                               <option value="15">15:00</option>
                                               <option value="16">16:00</option>
                                               <option value="17">17:00</option>
                                               <option value="18">18:00</option>
                                               <option value="17">19:00</option>
                                               <option value="18">20:00</option>
                                           </select>
                                       </div>

                                       <div>
                                           <label for="fio">Ваше имя и фамилия:</label>
                                           <input name="signFIO" type="text" placeholder="Пожалуйста, введите Ваше имя и фамилию" id="fio" required>
                                       </div>

                                       <div>
                                           <label for="phone">Номер телефона:</label>
                                           <input name="signPhone"  type="text" placeholder="Пожалуйста, введите Ваш номер телефона" id="phone" required>
                                       </div>


                                       <div>
                                       <button type="submit" onclick="return validate_fler()">
                                       <span>Записаться</span></button>
                                       </div>
                                   </form>

                                   <div id="wrap_fler" onclick="closeSign()"></div>

                                       <div id="window_fler">
                                        <h3>
                                             Ваша заявка принята. <br/>
                                          В ближайшее время с вами свяжется администратор нашего салона, что бы подтвердить запись.
                                        </h3>
                                         <a href="#" onclick="closeSign()" style="margin: 30px 0 0 0;">ЗАКРЫТЬ</a>
                                      </div>
</body>
</html>

I need to validate form for presence of all fields. Next I need to show to user the message in div window_fler. User can click the button to close the div. In my case when i click on button in the form I see message div is shown and quickly closed. Whats wrong in my code?

because after click submit button your page is refresh so you can not display error — Mayank Vadiya
– Mayank Vadiya, Commented Oct 6, 2015 at 5:34
you have return false after each check, so the code won't reach the part where the div is shown. — Flakes
– Flakes, Commented Oct 6, 2015 at 5:38

ryder · Accepted Answer · 2015-10-06 05:43:19Z

2

As Mayank pointed out, your form is being submitted on click of the button, which results in state change of your page.

<button type="submit" onclick="return validate_fler()">
<span>Записаться</span></button>

Try changing the type of this button to "button" and handle submit separately at some other point in your code.

<button type="button" onclick="return validate_fler()">
<span>Записаться</span></button>

You could try something like two separate buttons: 'Validate' and 'Submit Form'.

answered Oct 6, 2015 at 5:43

ryder

8976 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

J Santosh · Accepted Answer · 2015-10-06 06:43:48Z

In below block , you are returning false only if fields are not valid. after showing the modal or popup return false, so the form will not be submitted.

function validate_fler() {
  if (document.forms["fler_form"]["signDate"].value.length == 0) {
    return false
  };
  if (document.forms["fler_form"]["signTime"].value.length == 0) {
    return false
  };
  if (document.forms["fler_form"]["signFIO"].value.length == 0) {
    return false
  };
  if (document.forms["fler_form"]["signPhone"].value.length == 0) {
    return false
  };

  document.getElementById('window_fler').style.display = 'block';
  document.getElementById('wrap_fler').style.display = 'block';
  return false;// added this to prevent form submission
}

You didn't mention how you want to submit the form after showing a popup, so this is just a small fix to your problem. I'll update my post if you can say what actually you want to achieve

Submit Form Using AJAX (JQuery)

function SubmitForm() {
  var datastring = $("[name=fler_form]").serialize();
  alert(datastring)// this is the form data.
  $.ajax({
    type: "POST",
    url: "#the url of server to send data",
    data: datastring,
    dataType: "json",
    success: function(data) {
      //var obj = jQuery.parseJSON(data); if the dataType is not specified as json uncomment this
      // do what ever you want with the server response
    },
    error: function(errorObj) {
      console.log(errorObj)
    }
  });
}

function closeSign() {

  document.getElementById('window_fler').style.display = 'none';
  document.getElementById('wrap_fler').style.display = 'none';
}

function validate_fler() {

  if (document.forms["fler_form"]["signDate"].value.length == 0) {
    return false
  };
  if (document.forms["fler_form"]["signTime"].value.length == 0) {
    return false
  };
  if (document.forms["fler_form"]["signFIO"].value.length == 0) {
    return false
  };
  if (document.forms["fler_form"]["signPhone"].value.length == 0) {
    return false
  };

  document.getElementById('window_fler').style.display = 'block';
  document.getElementById('wrap_fler').style.display = 'block';
}

function SubmitForm() {
  var datastring = $("[name=fler_form]").serialize();
  alert(datastring)
  $.ajax({
    type: "POST",
    url: "#the url of server to send data",
    data: datastring,
    dataType: "json",
    success: function(data) {
      //var obj = jQuery.parseJSON(data); if the dataType is not specified as json uncomment this
      // do what ever you want with the server response
    },
    error: function(errorObj) {
      console.log(errorObj)
    }
  });
}

#wrap_fler {
   display: none;
   opacity: 0.8;
   position: fixed;
   background-color: rgba(1, 1, 1, 0.725);
   z-index: 100;
   overflow: auto;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   padding: 16px;
 }
 #window_fler {
   height: 400px;
   width: 400px;
   display: none;
   z-index: 200;
   position: fixed;
   margin: 150px auto;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   padding: 30px;
   background: #fff;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <form role="form" name="fler_form" action="" data-email-subject="Contact Form" data-show-errors="true">
    <div>
      <label for="dayTime1">Выберите дату:</label>
      <input name="signDate" type="text" placeholder="Пожалуйста, выберите дату" id="dayTime1" required>
    </div>
    <div>
      <label for="hourTime">Выберите время:</label>
      <select name="signTime" id="hourTime">
        <option>&nbsp;</option>
        <option value="10">10:00</option>
        <option value="11">11:00</option>
        <option value="12">12:00</option>
        <option value="13">13:00</option>
        <option value="14">14:00</option>
        <option value="15">15:00</option>
        <option value="16">16:00</option>
        <option value="17">17:00</option>
        <option value="18">18:00</option>
        <option value="17">19:00</option>
        <option value="18">20:00</option>
      </select>
    </div>
    <div>
      <label for="fio">Ваше имя и фамилия:</label>
      <input name="signFIO" type="text" placeholder="Пожалуйста, введите Ваше имя и фамилию" id="fio" required>
    </div>
    <div>
      <label for="phone">Номер телефона:</label>
      <input name="signPhone" type="text" placeholder="Пожалуйста, введите Ваш номер телефона" id="phone" required>
    </div>
    <div>
      <button type="button" onclick="return validate_fler()"> <span>Записаться</span>

      </button>
    </div>
  </form>
  <div id="wrap_fler" onclick="closeSign()"></div>
  <div id="window_fler">
    <h3>
                                             Ваша заявка принята. <br/>
                                          В ближайшее время с вами свяжется администратор нашего салона, что бы подтвердить запись.
                                        </h3>
    <a href="#" onclick="closeSign()" style="margin: 30px 0 0 0;">ЗАКРЫТЬ</a>

    <button type="button" onclick="SubmitForm()"> <span>Submit</span>

    </button>
  </div>
</body>

provide a button in popup and when clicked call a function to send the data to server using XMLHttpRequest(Pure JS) and ajax(jQuery). and before sending data you have to get the form data into an Object for POST or query string for GET and then send the data. I suggest use a framework jQuery for getting the form data and sending it to server using ajax

Amar Singh · Accepted Answer · 2015-10-06 05:43:38Z

0

Replace your <button type="submit" onclick="return validate_fler()"> <span>Записаться</span></button>

by

<input type="button" onclick="return validate_fler()">
                                   <span>Записаться</span></input>

Try this.This wont submit your form so you can get yours js code work properly.I have just given solution for what you have asked for.

answered Oct 6, 2015 at 5:43

Amar Singh

5,6223 gold badges30 silver badges56 bronze badges

Comments

Lea Cohen · Accepted Answer · 2015-10-06 06:13:23Z

0

Try

 if (document.forms["fler_form"]["signDate"].value.length == 0 || 
   document.forms["fler_form"]["signTime"].value.length == 0 || 

   document.forms["fler_form"]["signFIO"].value.length == 0 || 

   document.forms["fler_form"]["signPhone"].value.length == 0) { 

       document.getElementById('window_fler').style.display = 'block';      
       document.getElementById('wrap_fler').style.display = 'block'; 
};

return false doesn't make any sense there and it won't execute statements after it. If a condition is true, you have to execute display:block;

edited Oct 6, 2015 at 6:13

Lea Cohen

8,21018 gold badges76 silver badges99 bronze badges

answered Oct 6, 2015 at 5:37

krishna

1527 bronze badges

1 Comment

Lea Cohen Over a year ago

Fixed it up a little to make it more legible. I hope my edit i in accordance to what you meant.

Collectives™ on Stack Overflow

JavaScript form validation code errors

4 Answers 4

Comments

4 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related