Jquery prevent form submit

Question

I am having some issues preventing form submission on the below code. The form has dynamic inputs. There are none to start but they are added but the users later. This code doesn't show all of the dynamic field code, but there will be 5 or 6 fields in arrays such as type[].

What i would like to do is to prevent form submission until at least 1 set of dynamic inputs has been added and than validated. The code doesnt have the validation yet.

I have tried the below code samples but it doesnt appear to work, when i click submit with no dynamic fields it still resets all the inputs.

submitHandler: function(form) {
    form.submit(function(event) {
         event.preventDefault();
    });    
}
submitHandler: function(form) {
    form.submit(function() {
         return false();
    });    
}

if there are no dynamic fields i would like to display an error telling them to complete atleast 1 before the form can be submitted.

In the JQuery x is the number of fields already created so that is what i was thinking could be used to prevent the form submission.

Thank you in advance.

HTML:

    
    AWS CI Reservation
    
        
            Instructions:
            ...
        
        
    
        
            Requester's Name:
            
        
        
            Requester's Email:
            
          

        
            Project #: (if known)
            
        
        
            Project Contact:
            
        
        
            Location:
            
        
        
            Business Unit requested for:
            
        

        
    
        
        
        
               

            
        
        

        

            
            
            
                Add EC2 Instance
                Add EC2 Auto Scaling Instance
            
        
          
        
            
            
                Add RDS Instance
                Add Elastic Cache Instance
                Add Redshift Istance
            
        
          
        
            
            
                Add S3 Instance
                Add Glacier Instance

Jquery:

   (function($,W,D)
    {
        var JQUERY4U = {};

        JQUERY4U.UTIL =
        {
            setupFormValidation: function()
            {
                //form validation rules
                $("#aws-res-ci").validate({
                    rules: {
                        reqName: "required",
                        reqEmail: {
                            required: true,
                            email: true
                        },
                        projectContact: {
                            required: true
                        },
                        location: "required",
                        bu: "required",
                        ci-count: {
                            required: true,
                            min: 1
                        }
                    },
                    messages: {
                        firstname: "Please enter your firstname",
                        lastname: "Please enter your lastname",
                        password: {
                            required: "Please provide a password",
                            minlength: "Your password must be at least 5 characters long"
                        },
                    },
                    submitHandler: function(form) {
                        form.submit();
                    }
                });
            }
        }

        //when the dom has loaded setup form validation rules
        $(D).ready(function($) {
            JQUERY4U.UTIL.setupFormValidation();
        });

        //setting up funcations
        var max_fields              = 10; //maximum input boxes allowed
        var wrapper                 = $(".input_fields_wrap"); //Fields wrapper
        var add_ec2                 = $("#add_ec2_instance"); //Add button ID

        var x = 0; //initlal text box count
        //EC2 Instance
        $(add_ec2).click(function(e){ //on add input button click
            e.preventDefault();
            if(x < max_fields){ //max input box allowed
                x++; //text box increment
                $(wrapper).append(' \
                Remove'); //add input box
            }
        });         

        //remove item when told
        $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
            e.preventDefault(); $(this).parent('div').remove(); x--;
        });

    })(jQuery, window, document);

Jquery prevent form submit

Answers (1)

Related Questions