CODEWITHSUNDEEP
jqueryjquery-uijquery-validatejquery-dialog
Mahesh.D
Mahesh.D

Reputation: 1689

jQuery Validations issue in dialog form

I've login form as shown below,

<a href="#" id="loginLink">click Here to Log in</a>
<div class="formDiv" id="formDiv">
<form name="loginForm" id="loginForm" action="#">
    <label>Email</label><input type="text" name="email" id="email"><br/>
    <label>Passw</label><input type="password" name="pwd" id="pwd"><br/>
    <input type="submit" value="Log in" id="loginbtn" name="loginbtn">
</form>
</div>

I'm showing above form to users using jQuery Dialog,if form without dialog box(i,e normal HTML) then validations are doing without any issue its jsfiddle but if I'm showing form in dialog box then validations are not doing its jsfiddle, may I know the reason behind this ?

Upvotes: 0

Views: 372

Answers (2)

Sparky
Sparky

Reputation: 98718

You have several major flaws...

1) Your code that calls .validate()...

$(document).on("click", '#loginbtn', function(e){
    e.preventDefault();
    $("#loginForm").validate();        
    alert('test');  
    //I want to do Ajax stuff   
});

Do not call .validate() within a click handler because it only needs to be called one time. The .validate() method is not the method for calling validation on the form. It is only the method for initializing the plugin on the form. So just like in your working example, you must call .validate() as soon as the form is constructed, which is normally within the DOM ready event. The entire on('click') handler function above can be removed.

2) Your code that opens the dialog...

open:function(){                   
    $(this).html($("#formDiv").html());
},

Within your open callback, you duplicate the HTML from a hidden div into your dialog div for the form. The main problem with this technique is that you now have more than one element on the same page with with same id. Not only is this invalid HTML, but the jQuery Validate plugin will only apply to the first instance, the original hidden instance, of this id. Remove the open callback and attach the hidden div to .dialog() like this: $("#formDiv").dialog( ...

3) Your comment indicates you want to submit this form with ajax(). If that's the case, use the submitHandler callback function of the jQuery Validate plugin. As per documentation, this is the "right place to submit a form via Ajax after it is validated."

$("#loginForm").validate({ // initialize the plugin
    submitHandler: function (form) {
        // your ajax here;               // submit the data
        $("#formDiv").dialog("close");   // close the dialog
        alert('submitted with ajax');    // for demo 
        return false;                    // prevent regular form submit action
    }
});

Working DEMO: http://jsfiddle.net/TRHxZ/

$(document).ready(function () {

    $("#loginForm").validate({ // initialize the plugin
        submitHandler: function (form) {
            // your ajax here;               // submit the data
            $("#formDiv").dialog("close");   // close the dialog
            return false;                    // prevent regular form submit action
        }
    });

    $("a#loginLink").on("click", function (e) {
        e.preventDefault();

        $("#formDiv").dialog({
            closeOnEscape: false,
            title: "Login Form",
            modal: true,
            resizable: false,
            width: '350px',
            position: 'fixed',
            close: function () {
                $(".ui-dialog-content").dialog("close");
            }
        });
    });

});

Upvotes: 1

Dev
Dev

Reputation: 6776

TRy http://jsfiddle.net/devmgs/WNMfA/12/

$(document).ready(function(){

$("a#loginLink").on("click",function(e){
  e.preventDefault();

  $(".formDiv").dialog({
            closeOnEscape: false,
            title:"Login Form",
            modal: true,
            resizable: false,
            width:'350px',
            position:'fixed',

            close:function()
            {                    
                $(".ui-dialog-content").dialog("close");
            }
        });  
});

Use $(".formDiv") dont recreate it inside open function.

Upvotes: 2

Related Questions