Validate and submit a form containing data and a file using ajax/jquery

[Member 10949986]

I have a form containing data and a file input fields,
I want to submit and validate this form using jquery and ajax through one script.

Below is my form:

<form id="datas" method="post" enctype="multipart/form-data">
    <input type="text" name="firstName" value="" />
    <input name="pic" type="file" />
    <button>Submit</button>
</form>

Now I have this code to validate the data

$('#datas').validate({
    rules: {
        firstName:{
            required: true,
            minlength: 2,
            maxlength: 100
        }

    },
    messages: {
        firstName: {
            required: "Please Enter first name",
            minlength: jQuery.format("Enter at least {0} characters"),
            maxlength: jQuery.format("Enter atmost {0} characters"),
        }
    }
});

Then I have a seperate code that could submit the form

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

    var formData = new FormData($(this)\[0\]);

    $.ajax({
        url: sucess.php,
        type: 'POST',
        data: formData,
        async: false,
        success: function (data) {
            alert(data)
        },
        cache: false,
        contentType: false,
        processData: false
    });
});

**QUESTION:**

Please how can I combine these two scripts to validate the file and data fields and also submit to the success page.

[Dennis E White]

Since you are using the jQuery validation plugin why not read and follow their documentation where it appears they have some answers to questions similar. http://jqueryvalidation.org/validate[^]

[Sunasara Imdadhusen]

Using above code are getting any error?

[jkirkerx]

I just happen to be writing this at the moment, you can use it as a template or to simply get some ideas .onClientClick = load_template; return false;

function load_template() {

var
txtFocus,
txtError,
m\_secureToken,
m\_template,
m\_filePath;

var vFlag = true;
txtFocus = $('\[id\*="\_txt\_Focus\_Field"\]').val();
txtError = $('\[id\*="\_txt\_Error\_Field"\]').val();
m\_secureToken = $('\[id\*="\_txt\_Secure\_Token\_Field"\]').val();
m\_template = $('\[id\*="\_ddl\_CE\_FI\_Template\_Field"\] option:selected').text();
m\_filePath = $('\[id\*="\_ddl\_CE\_FI\_Template\_Field"\]').val();

if (m\_filePath === '--') {
    $('\[id\*="\_ddl\_CE\_FI\_Template\_Field"\]').css('background-color', txtError);
    $('\[id\*="\_img\_CE\_FI\_Template\_Error"\]').css('display', 'inline-block');
    vFlag = false;
}
else {
    $('\[id\*="\_ddl\_CE\_FI\_Template\_Field"\]').css('background-color', txtFocus);
    $('\[id\*="\_img\_CE\_FI\_Template\_Error"\]').css('display', 'none');
}

if (true === vFlag) {

    var send\_Data =
    "{" +
    "\\"p\_secureToken\\" : \\"" + m\_secureToken + "\\", " +
    "\\"p\_template\\" : \\"" + escape(m\_template) + "\\", " +
    "\\"p\_filePath\\" : \\"" + escape(m\_filePath) + "\\"  " +
    "}";

    alert(send\_Data);

    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "broadcastEditor.asmx/preview\_Template",
        data: send\_Data,
        dataType: "json",
        error: function (xhr, status, error) {
            exitCode = 2;
            $('\[id\*="\_updateProgress\_Unified"\]').fadeOut('fast', function () {
                alert(xhr.responseText);
            });
        },
        success: function (responseText) {
            var objB = jQuery.parseJSON(responseText.d);
            exitCode = objB.exitCode;
            var p\_Stream = unescape(objB.p\_Stream.replace(/\\+/g, " "));

            $('\[id\*="\_panel\_CE\_Container\_XHTML"\]').append(p\_Stream);
            $('\[id\*="\_updateProgress\_Unified"\]').fadeOut('fast');
            $('\[id\*="\_panel\_CE\_Container\_XHTML"\]').fadeIn('normal');
                     
        }
    });

}

}