Stop page reload on javascript form validation

Question

The above link has a form at the bottom of the page. When submitted withut values/invalid values the page validation reloads the page. How can I get it to just show the red validation errors and remain at the bottom without reloading to top of page? The only JS for this page I know of is below.

    function Check()
{  
  
  var returnValue = true;
  
  if ($('#dnn_ctr612_XModPro_ctl00_ctl00_ctl00_name').val() == 'Full name')
  {      
      $('#dnn_ctr612_XModPro_ctl00_ctl00_ctl00_name').val(''); 
      returnValue = false;
  }  
  
  if ($('#dnn_ctr612_XModPro_ctl00_ctl00_ctl00_company').val() == 'Company')
  {      
      $('#dnn_ctr612_XModPro_ctl00_ctl00_ctl00_company').val(''); 
      returnValue = false;
  }  
  
  if ($('#dnn_ctr612_XModPro_ctl00_ctl00_ctl00_email').val() == 'Email')
  {      
      $('#dnn_ctr612_XModPro_ctl00_ctl00_ctl00_email').val(''); 
      returnValue = false;
  }  
  
  if ($('#dnn_ctr612_XModPro_ctl00_ctl00_ctl00_phone').val() == 'Phone (optional)')
  {      
      $('#dnn_ctr612_XModPro_ctl00_ctl00_ctl00_phone').val('');       
  }  
  
  if ($('#dnn_ctr612_XModPro_ctl00_ctl00_ctl00_message').val() == 'Your message')
  {      
      $('#dnn_ctr612_XModPro_ctl00_ctl00_ctl00_message').val(''); 
      returnValue = false;
  }  
  
  return returnValue;
  
 }

using javascript is the key indeed. A quick note though : if any of your usercontrols or controls changes name , your whole javascript will be discarded... you may want to use the "clientId" property or so — Laurent S.
– Laurent S., Commented Jun 5, 2013 at 16:37
You should do something like var name = $('#name').val(); if (name == 'Full name' || $.trim(name) == '') {} — palaѕн
– palaѕн, Commented Jun 5, 2013 at 16:38

Divyanshu Negi · Accepted Answer · 2013-06-05 16:41:17Z

1

Use this method -- >

in your form give action="return check();"

Where check() is a function in javascript,

Function check()
{
if(your_form_values_condition)
{
return true;
}
else
{
alert("Please fill form correctly!");
return false;
}
}

answered Jun 5, 2013 at 16:41

Divyanshu Negi

6021 gold badge6 silver badges25 bronze badges

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

Comments

Adil Shaikh · Accepted Answer · 2013-06-05 16:40:27Z

0

use onclick="return Check()" like this -

<input type="submit" name="dnn$ctr632$XModPro$ctl00$ctl00$ctl00$ctl11" value="Send" onclick="return Check()"

answered Jun 5, 2013 at 16:40

Adil Shaikh

44.8k17 gold badges95 silver badges112 bronze badges

Comments

antyrat · Accepted Answer · 2013-06-05 16:45:34Z

0

You need to accept return value in inline event handlers

You have in your code:

<input type="submit" name="dnn$ctr632$XModPro$ctl00$ctl00$ctl00$ctl11" value="Send" onclick="Check();Web...

But you need

<input type="submit" name="dnn$ctr632$XModPro$ctl00$ctl00$ctl00$ctl11" value="Send" onclick="Web...; return Check();">

Or add Check() function into <form> element.

<form onsubmit="return Check();">

So this will submit form only if Check() function will return true.

Or using jQuery with this simple code:

$( '#Form' ).submit( function() {
    if( Check() ) return true;
    else return false;
});

But don't forget to remove Check() call from submit button in onclick handler as you will have in that case duplicate error messages.

edited Jun 5, 2013 at 16:45

answered Jun 5, 2013 at 16:39

antyrat

27.7k9 gold badges78 silver badges77 bronze badges

Collectives™ on Stack Overflow

Stop page reload on javascript form validation

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related