CODEWITHSUNDEEP
javascriptjqueryhtmlforms
homer5677
homer5677

Reputation: 595

Why is the a form fade function not allowing validation?

Is this code correct? I want the 'submit' to validate the field (to make sure a value has been entered) and if this is correct (there is a value) then fade and display.

Currently, the form fades even when no value is entered? I feel I'm missing something really 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 be 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>

Upvotes: 0

Views: 94

Answers (2)

Ben Chamberlin
Ben Chamberlin

Reputation: 731

Judging by your comment on the other answer, you don't care if this actually gets submitted, so you could do the 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 be filled out');
        return false;
    }

    $("#sidebarform").fadeOut("slow", function(){
          $("#sidebarf").html("hello " + $("#sidebarusername").val() );
    });

    return false;
});

});

Working example: http://jsfiddle.net/3z5x8/

Upvotes: 1

charlietfl
charlietfl

Reputation: 171689

Your validation is bound to the submit event. The click event will always be fullfilled.

Bind your handler to the submit event also

$("#sidebarformsubmit").submit( function(){.....

Unless you are submitting with ajax the form will cause a page refresh also which means your fade and show new html won't work

Upvotes: 0

Related Questions