javascript - Why is the a form fade function not allowing validation? -
is code correct? want 'submit' validate field (to make sure value has been entered) , if correct (there value) fade , display.
currently, form fades when no value entered? feel i'm missing simple here!
<!doctype html> <html> <head> <meta http-equiv='content-type' content='text/html; charset=utf-8' /> <meta http-equiv='x-ua-compatible' content='ie=edge,chrome=1' /> <link rel='stylesheet' type='text/css' href='styles.css' /> <meta charset="utf-8"--> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> <script> function validateform() { var x=document.forms["myform"]["fname"].value; if (x==null || x=="") { alert("first name must filled out"); return false; } } </script> </head> <body> <div id="sidebarf"> <form id="sidebarform" name="myform" onsubmit="return validateform()" method="post"> <input type="text" id="sidebarusername" name="fname" placeholder="name" required> <input type="submit" id="sidebarformsubmit" value="submit"> </form> </div> <script> $("#sidebarformsubmit").click( function(){ $("#sidebarform").fadeout("slow", function(){ $("#sidebarf").html("hello " + $("#sidebarusername").val() ) }); }); </script> </body> </html>
judging comment on other answer, don't care if gets submitted, following:
html:
<div id="sidebarf"> <form id="sidebarform" name="myform" method="post"> <input type="text" id="sidebarusername" name="fname" placeholder="name" /> <input type="submit" id="sidebarformsubmit" value="submit" /> </form> js:
$(document).ready(function() { $('#sidebarform').on('submit', function() { if ($('#sidebarusername').val() == '') { alert('first name must filled out'); return false; } $("#sidebarform").fadeout("slow", function(){ $("#sidebarf").html("hello " + $("#sidebarusername").val() ); }); return false; }); });
working example: http://jsfiddle.net/3z5x8/
Comments
Post a Comment