How do I use jquery validate remote validation to set and return form field values to the form action page?

问题

I have a form that validates using the jQuery plugin: Validation, v1.9.0. The validation also performs remote calls to a server side script (Coldfusion) to check user names, email addresses, etc..

My problem is this:

During the remote validation process, there are times when new form fields will be defined and set through the server side script which need to be returned to the calling form so that they can be passed to the form's action page.

As you'll notice in my code snippets below, I am having to walk these form field values through each step of the process (i.e., creating a result structure, picking those up in the success handler, etc.) which is both tedious, and prone to errors as the form may change in the future.

Is there a method I can use which will simply allow me to "globally" set these form field values which my calling form/action page can pickup through once the form validates?

JQUERY VALIDATION SNIPPET:

validator = $('#cartDownload_form').validate({

  submitHandler: function(form) {

  // make submit button disabled
  $('#submit_button').attr('disabled', 'disabled');

  // show modal dialog about submittal process..
  var processing_dialog = ShowDialog("Processing Order...", "<p>Please wait while we process your order...</p>", false);

  // prepare Options Object 
  var options = { 
    url: "/products/val_cartDownload_remote.cfm", 
    dataType: 'json',
    type: "POST",
    success: function(data) { 

      if(data.ERRORMESSAGELIST.length == 0) {
        // no errors...

        // set return form field values needed for action page
        $('#verified').val(data.VERIFIED);
        $('#dlurl').val(data.DLURL);
        $('#dllocation').val(data.DLLOCATION);
        $('#itemname').val(data.ITEMNAME);
        $('#itemtease').val(data.ITEMTEASE);
        $('#itemimage').val(data.ITEMIMAGE);
        $('#itemimage_border').val(data.ITEMIMAGE_BORDER);
        $('#itemimage_alt').val(data.ITEMIMAGE_ALT);
        $('#itemimage_title').val(data.ITEMIMAGE_TITLE);
        $('#itemthumb').val(data.ITEMTHUMB);
        $('#itemthumb_border').val(data.ITEMTHUMB_BORDER);
        $('#itemthumb_alt').val(data.ITEMTHUMB_ALT);
        $('#itemthumb_title').val(data.ITEMTHUMB_TITLE);
        $('#itempubnotes').val(data.ITEMPUBNOTES);
        $('#itemurl_size').val(data.ITEMURL_SIZE);  
        $('#first_name').val(data.FIRST_NAME);  

        // submit the form
        $('#cartDownload_form')[0].submit();  

        return true;

      } else {
        // an error occurred...

  }; 

  $(form).ajaxSubmit(options);

  return false;
}

REMOTE VALIDATION SNIPPET (these are new form fields and values not in calling form):

    <cfset variables.result_struct = {
  errorfieldlist = listtoarray(form.errorfieldlist),
  errormessagelist = listtoarray(form.errormessagelist, form.RS),
  verified = form.verified,
  dlurl = form.dlurl,
  dllocation = form.dllocation,
  itemname = form.itemname,
  itemtease = form.itemtease,
  itemimage = form.itemimage,
  itemimage_border = form.itemimage_border,
  itemimage_alt = form.itemimage_alt,
  itemimage_title = form.itemimage_title,
  itemthumb = form.itemthumb,
  itemthumb_border = form.itemthumb_border,
  itemthumb_alt = form.itemthumb_alt,
  itemthumb_title = form.itemthumb_title,
  itempubnotes = form.itempubnotes,
  itemurl_size = form.itemurl_size,
  first_name = form.first_name
}>

<cfoutput>#serializeJSON(result_struct)#</cfoutput>

So what I'm trying to get away from is having to set all of these form field values manually in several places simply to get them back to my calling form/action page.

I'm probably making a simply rookie mistake and I can't seem to find the answer.

Thanks.

回答1:

To simplify your jQuery:

if(data.ERRORMESSAGELIST.length == 0) {
// no errors...
// set return form field values needed for action page
    for (field in data)        {
      $('#' + field.toLowerCase()).val(data[field]);
    }

    // submit the form
    $('#cartDownload_form')[0].submit();  

And your cf code:

  <cfset variables.result_struct = {
    errorfieldlist = listtoarray(form.errorfieldlist),
    errormessagelist = listtoarray(form.errormessagelist, form.RS)
  }>
  <cfset StructAppend(variables.result_struct, form)>

<cfoutput>#serializeJSON(result_struct)#</cfoutput>

来源：https://stackoverflow.com/questions/8614191/how-do-i-use-jquery-validate-remote-validation-to-set-and-return-form-field-valu