html - jQuery form validation not kicking in -


i have written following code form tries post if javascript not being found?

the code within <head> of document:

<script language="javascript" type="text/javascript">     $('.entrysend').click(function(e){         e.preventdefault();          var error = false;         var name = $('#name').val();         var address = $('#address').val();         var phone = $('#phone').val();         var email = $('#email').val();          if(name.length == 0){             var error = true;             alert("please complete fields");         }         if(address.length == 0){             var error = true;             alert("please complete fields");         }         if(phone.length == 0){             var error = true;             alert("please complete fields");         }         if(email.length == 0){             var error = true;             alert("please complete fields");         }          if(error == false){             $.post("compthanks.asp",                     $(".entry").serialize(),                     function(result){                         if($.trim(result) == 'sent'){                             $('.entrysend').remove();                             alert("thanks entering!");                         }                     } </script> 

html:

<form class="entry" action="compthanks.asp" method="post" class="floatclear" name="entryform">        <br class="floatclear" />     <div class="formwrapper">         <input name="name" id="name" type="text" placeholder="fullname" />     </div>      <div class="formwrapper">         <textarea name="address" id="address" placeholder="address" cols="20" rows="10"></textarea>     </div>      <div class="formwrapper">         <input name="phone" id="phone" type="text" placeholder="contactnumber" />     </div>      <div class="formwrapper">         <input name="email" id="email" type="text" placeholder="email" />     </div>      <div class="formwrapper floatclear">           <input name="submit" type="submit" value="send entry" class="entrysend" />     </div> </form> 

can point out reason why form still submits opposed javascript kicking in?

if js in <head> of page, won't work. when add

$('.entrysend').click(function(e){...}); 

there no element class of entrysend on page yet.

to fix that, have 2 options:

  • move js bottom of page, after <form> element.

  • wrap js in ready handler:

js:

$(document).ready(function() {     $('.entrysend').click(function(e){...}); }); 

this way, jquery wait until html has been added dom before trying attach click handler entrysend element.

update:

i added code jsfiddle , noticed have js errors in code posted. might copy/paste error, might cause of issue:

you never close half of functions. end 2 curly braces, close last function block. need add )}}) , of js

  • a ) close $.post
  • a } close if(error == false)
  • a } close anonymous function in click handler
  • a ) close click handler

new js:

<script language="javascript" type="text/javascript">     $(document).ready(function() {         $('.entrysend').click(function(e){             e.preventdefault();              var error = false;             var name = $('#name').val();             var address = $('#address').val();             var phone = $('#phone').val();             var email = $('#email').val();              if(name.length == 0){                 var error = true;                 alert("please complete fields");             }             if(address.length == 0){                 var error = true;                 alert("please complete fields");             }             if(phone.length == 0){                 var error = true;                 alert("please complete fields");             }             if(email.length == 0){                 var error = true;                 alert("please complete fields");             }              if(error == false){                 $.post("compthanks.asp", $(".entry").serialize(),function(result){                     if($.trim(result) == 'sent'){                         $('.entrysend').remove();                         alert("thanks entering!");                     }                 });             }         });     }); </script> 

Comments

Popular posts from this blog

monitor web browser programmatically in Android? -

Shrink a YouTube video to responsive width -

wpf - PdfWriter.GetInstance throws System.NullReferenceException -