Form won't submit

[jqueryguParticipant]

Hello all

I have my validation working but when I get to the final submit, the form doesn’t submit.

Here is my validation

<script type="text/javascript">
        $(document).ready(function () {
            // Create jqxExpander.
           // $("#box-secondary").jqxExpander({  toggleMode: 'none', width: '900px', showArrow: true});
		   
			   
		   
            // Create jqxInput.
            $("#firstName").jqxInput({  width: '300px', height: '25px' });
            $("#lastName").jqxInput({  width: '300px', height: '25px'});
            $("#userName").jqxInput({  width: '300px', height: '25px' });
			$("#email").jqxInput({  width: '300px', height: '25px' });
			$("#emailVerify").jqxInput({  width: '300px', height: '25px'});			
			
			$("#secondaryEmail").jqxInput({  width: '300px', height: '25px' });
            $("#secondaryEmailVerify").jqxInput({  width: '300px', height: '25px'});	
		
            // Create jqxPasswordInput.
            $("#password").jqxPasswordInput({  width: '300px', height: '25px', showStrength: true, showStrengthPosition: "right" });
            $("#passwordConfirm").jqxPasswordInput({  width: '300px', height: '25px' });
            // Create jqxDateTimeInpput.

			$("#securityQuestion").jqxInput({  width: '300px', height: '25px' });
			$("#securityAnswer").jqxInput({  width: '300px', height: '25px' });
			
			$("#countryID").jqxInput({  width: '300px', height: '25px' });
			
			
			

            // Create jqxValidator.
            $("#step1").jqxValidator({
                rules: [
                        { input: "#firstName", message: "<cfoutput>#message3#</cfoutput>", action: 'keyup, blur', rule: 'required' },
						{ input: '#firstName', message: "<cfoutput>#message4#</cfoutput>", action: 'keyup, blur', rule: 'length=1,100'},						
						{ input: "#lastName", message: "<cfoutput>#message5#</cfoutput>", action: 'keyup, blur', rule: 'required' },
						{ input: '#lastName', message: "<cfoutput>#message6#</cfoutput>", action: 'keyup, blur', rule: 'length=1,100'},	
						//email					
						{ input: "#email", message: "<cfoutput>#message7#</cfoutput>", action: 'keyup, blur', rule: 'required' },
						{ input: '#email', message: "<cfoutput>#message8#</cfoutput>", action: 'keyup, blur', rule: 'length=1,100'},							
						{ input: '#email', message: "<cfoutput>#message9#</cfoutput>", action: 'keyup, blur', rule: 'email'},		
						
								//email verificaltion
						{ input: "#emailVerify", message: "<cfoutput>#message10#</cfoutput>", action: 'keyup, blur', rule: 'required' },
						{ input: '#emailVerify', message: "<cfoutput>#message9#</cfoutput>", action: 'keyup, blur', rule: 'email' },						
						{
                           input: '#emailVerify', message: "<cfoutput>#message11#</cfoutput>", action: 'keyup, blur', rule: function (input, commit) { 
                               if (input.val() === $('#email').val()) {
                                   return true;
                               }
                               return false;
                           }
                        },
							
						
						      
						// username and password
						{ input: "#userName", message: "<cfoutput>#message18#</cfoutput>", action: 'keyup, blur', rule: 'required' },
						{ input: '#userName', message: "<cfoutput>#message19#</cfoutput>", action: 'keyup, blur', rule: 'length=4,50'},	

                        { input: "#password", message: "<cfoutput>#message20#</cfoutput>", action: 'keyup, blur', rule: 'required' },
						{ input: '#password', message: "<cfoutput>#message21#</cfoutput>", action: 'keyup, blur', rule: 'length=8,50'},	
						{ input: "#passwordConfirm", message: "<cfoutput>#message22#</cfoutput>", action: 'keyup, blur', rule: 'required' },
						
						
                        {
                            input: "#passwordConfirm", message: "<cfoutput>#message22#</cfoutput>", action: 'keyup, blur', rule: function (input, commit) {
                                var firstPassword = $("#password").jqxPasswordInput('val');
                                var secondPassword = $("#passwordConfirm").jqxPasswordInput('val');
                                return firstPassword == secondPassword;
                            }
                        },
						
					  { input: "#securityQuestion", message: "<cfoutput>#message24#</cfoutput>", action: 'keyup, blur', rule: 'required' },
					  { input: "#securityAnswer", message: "<cfoutput>#message25#</cfoutput>", action: 'keyup, blur', rule: 'required' },
					  
					  
					   { input: "#countryID", message: "<cfoutput>#message87#</cfoutput>", action: 'keyup, blur', rule: 'required' }
						
                       
					   
					   
                ],  hintType: "label"
            });
            // Validate the Form.
            $("#submit").click(function () {
                $('#step1').jqxValidator('validate');
            });
     
        });
    </script>

Here are my form tags with submit

<cfform name="step1" id="step1" action="#cgi.SCRIPT_NAME#?pageID=154&icat=#url.icat#&ac=#url.ac#">

<input id="submit" name="memberRegister" class="button inverse" type="button" value="Send" />

</cfform>

Any suggestions?

[Peter StoevKeymaster]

Hi jquerygu,

The issue here is that your “Send” Button is not a Submit button i.e it does not make submit, it’s just an ordinary button. It’s Ok to be an ordinary button, but that means that you will have to manually call the Form’s submit function. There is no code for that, too. To learn how to build a form and submit it and validate it, see: http://www.jqwidgets.com/jquery-widgets-demo/demos/php/message_form.htm?arctic

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[jqueryguParticipant]

Thanks

That helped.

Here is my button:

<input type="button" id="sendButton" class="button inverse" value="Send"/>

And here is what I added to the script:

   // validate form.
            $("#sendButton").click(function () {
                var validationResult = function (isValid) {
                    if (isValid) {
                        $("#step1").submit();
                    }
                }
                $('#step1').jqxValidator('validate', validationResult);
            });

[Author]

Posts