SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 36 of 36
  1. #26
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,714
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by donboe View Post
    Can someone please tell me what I am doing wrong here?
    Get rid of the inline onclick attribute - for that interferes with how the validate code works.

    Get the form plugin api, which lets you submit the form by ajax with the following simple command:

    Code javascript:
    $("#registratie_form").ajaxForm(function () {
        // success
    });

    Then use the validate submitHandler to connect everything together:

    Code javascript:
    $("#registratie_form").validate({
        rules: {
            ...
        },
        messages: {
            ...
        },
        submitHandler: {
            ...
        }
    });

    That's it - nice and simple.

    How it might look in full could be something like this:

    Code javascript:
    $("#registratie_form").validate({
        rules: {
            naam: "required",
    },
        messages: {
            naam: "Naam is verplicht!",
        },
        submitHandler: {
            $("#registratie_form").ajaxForm(function (response) {
                $("#send_status").html($(response).fadeIn(2000));
                $("#registratie_form").fadeOut(1000);
                $("#naam").val('');
            });
        }
    });
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  2. #27
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,112
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    How it might look in full could be something like this:

    Code javascript:
    $("#registratie_form").validate({
        rules: {
            naam: "required",
    },
        messages: {
            naam: "Naam is verplicht!",
        },
        submitHandler: {
            $("#registratie_form").ajaxForm(function (response) {
                $("#send_status").html($(response).fadeIn(2000));
                $("#registratie_form").fadeOut(1000);
                $("#naam").val('');
            });
        }
    });
    HI Paul. I have done exactly what you've said :
    Code:
    	  $("#registratie_form").validate({
    		  rules: {
    			  naam: "required",
    			  profiel: "required",
    			  jaar: "required",
    			  woonplaats: "required",
    			  geslacht: "required",
                  provincie: "required",
    			  geaardheid: "required",
    		  	  email: {
    				required: true,
    				email: true,
    				remote: "modules/site/check-email.php"
    			 },
    			  wachtwoord: {
    				required: true,
    				minlength: 5
    			 },
    			  herhaal_wachtwoord: {
    				required: true,
    				minlength: 5,
    				equalTo: "#wachtwoord"
    			 },    			
    		  },
    		  messages: {
    			  naam: "Naam is verplicht!",
    			  profiel: "Profiel naam is verplicht!",
    			  jaar: "Geboorte datum is verplicht!",
    			  woonplaats: "Woonplaats is verplicht!",
    			  geslacht: "Geslacht is verplicht!",
    			  geaardheid: "Geaardheid is verplicht!",
    			  provincie: "Provincie is verplicht!",
    			  email: {
                        required: "Email adres is verplicht!",
                        email: "Ongeldig email adres!",
                        remote: jQuery.validator.format("{0} is al in gebruik!")
                  },
    			  wachtwoord: {
    				    required: "Wachtwoord is verplicht!",
    				    minlength: "Dient minimaal 5 tekens te bevatten!"
    			  },
    			  herhaal_wachtwoord: {
    				    required: "Herhaal het wachtwoord!",
    				    minlength: "Dient minimaal 5 tekens te bevatten!",
    				    equalTo: "Wachtwoorden komen niet overeen!"
    			  },			  		  			  
    		  },
    		  submitHandler: {
    			 $("#registratie_form").ajaxForm(function (response) {
                      $("#send_status").html($(response).fadeIn(2000));
                      $("#registratie_form").fadeOut(1000);
                      $("#naam").val('');				  
    			  });			  
    		  }		  
    	  });
    But I get an error marking this line:
    Code:
    $("#registratie_form").ajaxForm(function (response) {
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  3. #28
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by donboe View Post
    But I get an error marking this line:
    Code:
    $("#registratie_form").ajaxForm(function (response) {
    What does the error say?
    Where are you seeing it?

  4. #29
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,714
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by donboe View Post
    HI Paul. I have done exactly what you've said
    Do you have the form plugin api obtained from http://www.malsup.com/jquery/form/#ajaxForm by downloading and using the script from http://malsup.github.com/min/jquery.form.min.js ?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #30
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,112
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Pullo. I see it in Dreamweaver. as soon as I insert the function
    Code:
    		  $("#registratie_form").ajaxForm(function (response) {
    			  
    		  });
    it marks the line where the function start red and the message on the top read ther is a syntax error on line 80.

    After that I tried it the following way:
    Code:
    		  submitHandler: function (form) {
    			 $.ajax({				  
                             type: "POST",
                             url: "modules/site/process_contact_form.php",
                             data: $(form).serialize()	  
    			  });
    		     return false;
    		  }
    That doesn't give me an error but the form is not submited either. This is driving me crazy
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  6. #31
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    The code you posted is fine.
    The error is probably elsewhere.
    Try viewing your page in the browser's console, or running your JS through JSHint for more helpful error messages.

  7. #32
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,714
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by donboe View Post
    That doesn't give me an error but the form is not submited either. This is driving me crazy
    Oh of course - the danger of writing scripting code without checking it rears its ugly head.

    That submitHandler should be a function:

    Code javascript:
    submitHandler: function () {
        ...
    }

    My apologies for the confusion.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #33
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,112
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @ Paul. Yes i did

    @ Pullo
    Just tried JSHint it states

    There is only one function in this file.
    It takes one argument.
    This function contains 2 statements.
    Cyclomatic complexity number for this function is 1.
    and

    Three undefined variables
    12 $
    60 $
    63 $
    and this is the data on these three lines:
    12 $("#registratie_form").validate({

    60 $.ajax({

    63 data: $(form).serialize()
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  9. #34
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,112
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Oh of course - the danger of writing scripting code without checking it rears its ugly head.

    That submitHandler should be a function:

    Code javascript:
    submitHandler: function () {
        ...
    }

    My apologies for the confusion.
    Hi Paul. Now I don't het the error . Last question though. Can I add the Ajax call i.e.
    Code:
    			 $.ajax({				  
                             type: "POST",
                             url: "modules/site/process_contact_form.php",
                             data: $(form).serialize()	  
    			  });
    		     return false;
    within the $("#registratie_form").ajaxForm(function (response) {

    });
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  10. #35
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,112
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul.

    The form is not submitting . To test the functions I made a test page with just one field which you can find here

    And this is the HTML:
    Code:
    <div id="wrapper">
    <form action="" method="post" name="registratie_form" id="registratie_form">
      <input name="naam" type="text" size="20"><br><br>
      <input name="submit" type="submit" value="submit">
    </form>
    </div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
    <script type="text/javascript" src="js/jquery.form.min.js"></script>
    <script type="text/javascript">  
    	  $("#registratie_form").validate({
    		  rules: {
    			  naam: "required"   			
    		  },
    		  messages: {
    			  naam: "Naam is verplicht!"	  		  			  
    		  },
    		  submitHandler: function () {
    			  $("#registratie_form").ajaxForm(function () {
    			  var naam    = $("#naam").val();
    			  var dataString = 'naam='+ naam;
    			      $.ajax({				  
                          type: "POST",
                          url: "success.html",
                          data: dataString,
                          cache: false,
    		      success: function(response) {
                    $("#send_status").html($(response).fadeIn(2000));
    			    $("#form_content").fadeOut(1000);
                       $("#naam").val('');					  
    				  }
    			  });
    			  });
    		  }
    	  });
    </script>
    What is wrong with this
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  11. #36
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,714
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by donboe View Post
    What is wrong with this
    AjaxForm is sending the ajax submission. The function inside it is the success function that occurs when a response from the server is returned.

    Inside of that function you are performing a second ajax submission, which is a bad idea.

    What is wrong? Remove one of the ajax submissions, ideally the second one, and put a proper action attribute on your form posting it to success.html
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •