How to execute Jquery onclick="" function only after JS validation

Question

I wonder if I can execute onlick function only after JS validation any ideas?

I have a form which has e-amil and phone mandatory filed and i would like to check them before form is submitted , even more if everything is ok another div onclick="$('#dialog-links-blocks').show()" should be display with a message Thank you! How can I make it to be shown only after validation !

<script type="text/javascript">// <![CDATA[
function validateForm()
{
var x=document.forms["myform"]["phone"].value;
var y=document.forms["myform"]["email"].value;
if (x==null || x=="")
  {
  alert("Укажите номер телефона!");
  return false;
  }
if (y==null || y=="")
  {
  alert("Укажите email!");
  return false;
  }

}
// ]]></script>


<iframe name="hiddenFrame" width="320" height="240"></iframe>
<form id="validation" action="http://listovki.md/send_form_email.php" method="POST" name="myform" enctype="multipart/form-data" onsubmit="return validateForm()" target="hiddenFrame">
    <table><colgroup> <col width="122" /> <col width="260" /> </colgroup>
    <tbody>
    <tr>
    <td><label>имя</label></td>
    <td><input type="text" name="family" /></td>
    </tr>
    <tr>
    <td><label>почта</label></td>
    <td><input type="email" name="email" /></td>
    </tr>
    <tr>
    <td><label>gsm</label></td>
    <td><input class="gsm" type="tel" name="phone" /></td>
    </tr>
    <tr>
    <td colspan="2"><input class="aplicaAcumBt" onclick="$('#dialog-links-blocks').show()" type="submit" name="submit" value="отправить" /></td>
    </tr>
    </tbody>
    </table>
    </form>

you can't because the click event of the submit button will fire before the submit event of the form is fired.... you can rearrange the code so that the code is executed after the validation — Arun P Johny
– Arun P Johny, Commented Jan 24, 2014 at 10:33
if you want to go with inlined event handler(not recommended) then try <form id="validation" action="http://listovki.md/send_form_email.php" method="POST" name="myform" enctype="multipart/form-data" onsubmit="if(!validateForm()){return false;}$('#dialog-links-blocks').show();" target="hiddenFrame"> and remove the onclick handler — Arun P Johny
– Arun P Johny, Commented Jan 24, 2014 at 10:35
You could use jQuery validation plugin to validate your inputs right after they were filled. (jqueryvalidation.org) — ER144
– ER144, Commented Jan 24, 2014 at 12:48

Anirudh · Accepted Answer · 2014-01-24 12:47:19Z

1

Why not show div only if validation is true? why show only on click

    <script type="text/javascript">// <![CDATA[
    function validateForm()
    {
    var x=document.forms["myform"]["phone"].value;
    var y=document.forms["myform"]["email"].value;
    if (x==null || x=="")
      {
      alert("Укажите номер телефона!");
      return false;
      }
    if (y==null || y=="")
      {
      alert("Укажите email!");
      return false;
      }
    // Validation is true here
    $('#dialog-links-blocks').show()
    }
    </script>

answered Jan 24, 2014 at 12:47

Anirudh

15.8k2 gold badges17 silver badges26 bronze badges

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

Collectives™ on Stack Overflow

How to execute Jquery onclick="" function only after JS validation

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related