Question

I trying to get the beforesubmit option to work so I can validate the form before it is submitted. I must be missing something. This runs fine but it totally ignores the function.

 $(document).ready(function() {
            var options = {
                    beforesubmit: function() {
                            var subjectTxtVal = $('input[name=subjectTxt]').fieldValue(); 
                            var messageTxtVal = $('input[name=messageTxt]').fieldValue();

                            if (!subjectTxtVal[0] || !messageTxtVal[0]) { 
                                alert('Please enter a value for subject and message'); 
                                return false; 
                            } 
                    },
                    target:  '#results',
                    success: showResponse
            };
            $('#results').dialog({autoOpen: false, modal: true, buttons: {
                            Ok: function() {
                                    $( this ).dialog( "close" );
                            }
                    }});
            $('#resemail').submit(function() {
                    $(this).ajaxSubmit(options);
                    $('#results').dialog('open');
                    return false;
            });

    });

Based on my testing with firebug I don’t see where it is ever actually calling the function. I have looked at the docs and the examples but it is somewhat confusing. Any ideas?

Thanks.

Answer 1

Why not just validate it yourself before submit instead of relying on the plugin ?

$(document).ready(function() {
            var options = {
                    target:  '#results',
                    success: showResponse
            };
            $('#results').dialog({autoOpen: false, modal: true, buttons: {
                            Ok: function() {
                                    $( this ).dialog( "close" );
                            }
                    }});
            $('#resemail').submit(function() {
                    if( validate_fields() )
                    {
                        $(this).ajaxSubmit( options );
                    }
                    else 
                       return false;                                                     
            });

});

function validate_fields() 
{
  var subjectTxtVal = $('input[name=subjectTxt]').fieldValue(); 
  var messageTxtVal = $('input[name=messageTxt]').fieldValue();

  if (!subjectTxtVal[0] || !messageTxtVal[0]) { 
      alert('Please enter a value for subject and message'); 
      return false; 
   }
   return true;  
}