0

I am developing a form that which includes some textfields and some fields for file uploads. Some javascript code builds the form dynammically by adding it to to a div element (id=wrapper). To my knowlegde one cannot send/upload files via ajax, so I choose the 'classic way' to post the form, see code below. However, I want to have the textfields validated by means of jquery validate; the validation code works fine, but how to prevent the form submission in case of a validation error?. I assume I need somehow to override the standard form submission handler, but dont know how to do that...

//original form submit code
$("#formNewAgreements").submit(function(){
var form = $("#formNewAgreements");

form.validate();
if(form.valid()){ //only submit via ajax if javascript validation has been performed successfully
    $.ajax({
        type: "POST",
        url: "suppladmin_agreementsetup_submit_x1.php",
        data: $("#formNewAgreements").serialize(),
        dataType: "json",

        success: function(msg){
        if(msg.statusgeneral == 'success'){
            $("#wrapper").children().remove(); //remove current New Agreements form
            SetupAgreements();
        }
        else
        {
           $("#errorbox").html(msg.statusgeneral);

        }//else
        }, //succes: function   
        error: function(){
    $("#errorbox").html("There was an error submitting the form. Please try again.");
        }
    });//.ajax

//make sure the form doesn't post
return false;
} //if(form.valid()

});//$("#myForm").submit()


//validation code for validing the textfields
var completeform = $("#formNewAgreements");
completeform.validate();

//html code form
<form id="formNewAgreements" name="formNewAgreements" action="submit_x1.php" method="post" enctype="multipart/form-data" target="hidden-form" >
<!--<form id="formNewAgreements" name="formNewAgreements" action="" method="post" autocomplete="on">-->
    <a href="#" id="add-form">Add agreement</a>
    <div id="wrapper"></div> <!--anchor point for adding set of form fields -->   
    <input type="hidden" name="form_token" value="<?php echo $form_token; ?>" />
    <input type="submit" name="submitForm" value="Confirm">
</form>
<iframe style="display:inline" name="hidden-form" width="200" height="20"></iframe>
Joppo
  • 715
  • 2
  • 12
  • 31
  • 1
    You can upload files via AJAX. Where is your validation code? – putvande Nov 27 '13 at 17:20
  • Show the form HTML as **rendered** in the browser... the `php` code in the markup is useless to JavaScript. – Sparky Nov 27 '13 at 17:39
  • @putvd: as far as I know you can only upload files via ajax with html5 - referrering to http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery. With my original jquery submitfunction, which I just added on this site, my netbeans debugger shows an empty $_FILES var. – Joppo Nov 27 '13 at 18:04

2 Answers2

0

Quote OP:

"I want to have the textfields validated by means of jquery validate"

Since you're using the jQuery Validate plugin, simply implement the submitHandler callback for your ajax. As per documentation, this is "the right place to submit a form via Ajax after it is validated".

Despite others' answers,

  • You do not need inline JavaScript.

  • You do not need any additional event handlers.


var completeform = $("#formNewAgreements");
completeform.validate({
    submitHandler: function(form) {
        // your ajax here
        return false;  // block default form action
    }
});

DEMO: http://jsfiddle.net/U4P3F/

Sparky
  • 98,165
  • 25
  • 199
  • 285
  • thnx. as far as I know you can only upload files via ajax with html5 - referring to http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery. With my original jquery submitfunction, which I just added on this site, my netbeans debugger shows an empty $_FILES var. If I'm still wrong about the ajax file upload there must be something wrong with my submit function? – Joppo Nov 27 '13 at 18:07
  • @user2543182, your edited code is worse than before. Putting `.validate()` inside of a `submit()` handler is **not** the proper way to go about this... it's inside out. Simply study my basic example which shows how the validation is automatic once it's properly initialized, and how the `submitHandler` callback properly handles the interception of form submission. – Sparky Nov 27 '13 at 19:11
  • thnx, I see your point. But I still struggle how to upload files -combined with some text fields- in a form with ajax/jquery in a simple way. As commented before I saw a few pages - also this one http://stackoverflow.com/questions/10260865/uploading-files-with-jquery-ajax-and-php?rq=1 - saying you cant do that, as opposed to what you said...(?) – Joppo Nov 27 '13 at 19:36
  • @user2543182, until I can sort it out, I removed that part of my answer. However, the same principals apply... any code that you want to fire when the form is valid and ready to submit, goes inside the `submitHandler` callback function. – Sparky Nov 27 '13 at 21:04
-1

Try this

<input type="submit" name="submitForm" value="Confirm" onclick='completeform.validate();' />

In this case your validate method should return true or false depending on if form is valid or not.

EDIT: As @lex82 mentioned the proper way to do this is to add handler to form submit. Change you form tag to:

<form id="formNewAgreements" name="formNewAgreements" action="submit_x1.php" method="post" enctype="multipart/form-data" target="hidden-form" onsubmit='completeform.validate();'>
Yevgeniy.Chernobrivets
  • 3,194
  • 2
  • 12
  • 14
  • You will miss all the cases where the form is submitted without clicking the submit button (e.g. by pressing ENTER in an input field). Use onsubmit instead (see my answer). – lex82 Nov 27 '13 at 17:27
  • `.validate()` is the initialization of the plugin... not the method of testing, so it does **not** return `true` or `false` by that method. Therefore, it makes no sense to put this inside of a submit handler. Not to mention the fact that inline JavaScript is pretty pointless when using jQuery. – Sparky Nov 27 '13 at 17:52