CODEWITHSUNDEEP
javascripthtmlvalidation
Art B
Art B

Reputation: 147

JavaScript form validation code errors

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?

Upvotes: 0

Views: 79

Answers (4)

J Santosh
J Santosh

Reputation: 3847

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>

Upvotes: 1

krishna
krishna

Reputation: 152

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;

Upvotes: 0

Amar Singh
Amar Singh

Reputation: 5622

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.

Upvotes: 0

ryder
ryder

Reputation: 897

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'.

Upvotes: 2

Related Questions