CODEWITHSUNDEEP
jqueryformsjquery-validate
Sowmya
Sowmya

Reputation: 26979

Validate form before adding an extra text fields

IF you check my FIDDLE HERE, there is a form which is validated properly. You can click on submit button to check how it works.

And there is another button called Add Person,which creates a group of text fields.

My question is, the Add person button should create text fields only when the form is fully filled. If form is not filled and user clicks on Add person button then it should show an alert.

Here is my code 

$.validator.setDefaults({
    submitHandler: function() { alert("submitted!"); }
});

$().ready(function() {
    // validate the comment form when it is submitted
    $("#commentForm").validate();

    // validate signup form on keyup and submit
    $("#signupForm").validate({
        rules: {
            firstname: "required",
            lastname: "required",           
            email: {
                required: true,
                email: true
            },
            topic: {
                required: "#newsletter:checked",
                minlength: 2
            },
            agree: "required",
            'country': {
    required: true
 }
        },

        messages: {
            firstname: "Please enter your firstname",
            lastname: "Please enter your lastname",
            username: {
                required: "Please enter a username",
                minlength: "Your username must consist of at least 2 characters"
            },
            email: "Please enter a valid email address",
            agree: "Please accept our policy",
            country: "Please select an option"
        }
    });


clicks = 0;
$('a').on('click', function () {
    $('.attnd2').show();
  $('div.loop').show();
    if ($('div.loop').length < 5) {
        clicks++;
        if(clicks>1){
            newLoopDiv = $($('div.loop')[0]).clone().appendTo(".container");
            $('input', newLoopDiv).each(function (index, element) {
            $(element).attr('name', $(element).attr('name') + clicks);
        });
        }
        else{
        newLoopDiv = $($('div.loop')[0]).appendTo(".container");
            $('input', newLoopDiv).each(function (index, element) {
            $(element).attr('name', $(element).attr('name') + clicks);
        });


    }

    }
}); 
});

Upvotes: 1

Views: 147

Answers (3)

Rohan Kumar
Rohan Kumar

Reputation: 40639

You should add rules for dynamically created elements like

$.validator.setDefaults({
    submitHandler: function(frm) { 
        var flag=true;
        var $allElemReq=$("input[required],select[required]");
        for(var ind=0;ind<$allElemReq.length;ind++)
        {
            elem=$allElemReq[ind];
            if(!$(elem).val())
            {
                flag=false;
                $(frm).validate().element($(elem));
                break;
            }
        }
        if(flag)
            alert("submitted!"); 
        else
            alert('Not submitted');
    }
});

Additional add a required attribute for the compulsory fields

Fiddle: http://jsfiddle.net/rw9ns/22/

Upvotes: 1

Devang Rathod
Devang Rathod

Reputation: 6736

Try this : Fiddle

$('a').on('click', function () {

    if($('#firstname').val() != '' && $('#lastname').val() != '' && $('#email').val() != '' && $("#agree").prop('checked') == true && $('#country').val() != '') {

    $('.attnd2').show();
    ('div.loop').show();
    if ($('div.loop').length < 5) {
        clicks++;
        if(clicks>1){
            newLoopDiv = $($('div.loop')[0]).clone().appendTo(".container");
            $('input', newLoopDiv).each(function (index, element) {
            $(element).attr('name', $(element).attr('name') + clicks);
        });
        }
        else{
        newLoopDiv = $($('div.loop')[0]).appendTo(".container");
            $('input', newLoopDiv).each(function (index, element) {
            $(element).attr('name', $(element).attr('name') + clicks);
        });


    }

    }
    } else {
        alert('Please fillup field before add');
    }      
});

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388366

Try

$('a').on('click', function () {
    if(!$("#signupForm").valid()){
        return;
    }

    $('.attnd2').show();
    $('div.loop').show();
    if ($('div.loop').length < 5) {
        clicks++;
        if(clicks>1){
            newLoopDiv = $($('div.loop')[0]).clone().appendTo(".container");
            $('input', newLoopDiv).each(function (index, element) {
                $(element).attr('name', $(element).attr('name') + clicks);
            });
        }
        else{
            newLoopDiv = $($('div.loop')[0]).appendTo(".container");
            $('input', newLoopDiv).each(function (index, element) {
                $(element).attr('name', $(element).attr('name') + clicks);
            });


        }

    }
});

Demo: Fiddle

Upvotes: 0

Related Questions