locked
jquery dialogbox client side validation does not work. why? RRS feed

  • Question

  • User-1651604128 posted

    Hi, in my jquery dialogbox, I need to validate jquery dialogbox from client side, so I added these codes, but it does not work, the message does not show and it passed the code even I did not add anything on the fields. can anybody help me where is the problem in my codes? thanks

    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
    
        });
    
            $(function () {
            $('#myButton').click(function () {
                $('#dialog').dialog('open');
            });
           
            $("#dialog").dialog({
                title: "Create a new doc",
                show: 'slide',
                closeText: 'X',
                dialogClass: 'alert',
                closeOnEscape: true,
                autoOpen: false,
                height: 250,
                width:350,
                buttons: {
                    "Create": function () {
                        $.ajax({
                            url: '@Url.Action("CreateNewDoc", "docfunction")',
                            type: 'post',
                            // data: $('#myForm').serialize(),
                            data: {
                                accountNumber: $("#AccountNum").val(),
                                letterName: $("input[name=letterName]:checked").val(),
                                amended: $("input[name=amended]:checked").val(),
                                lanCode: $("#LandCode").val()
                            },
                            success: function (result) {
                              
                                $('#dialog').dialog('close');
                            }
    
                        });
                                           $("#myForm").validate({
                            rules: {
                                AccountNum: {
                                    required: true
                                   
                                },
                                Email: {
                                    required: true,
                                    email: true
                                }
                            },
                            messages: {
                                AccountNum: " Account# is required ",
                                Email: {
                                    required: " * ",
                                    email: " Invalid e-mail."
                                }
                            }
                        });
                        //
                    },
                    "Cancel": function() { $(this).dialog('close');  }
    
                }
               
            });
           
        });
    
    
    </script>

    PS. in my view header, I have imported jquery.ui and jquery.validate.js

    Saturday, February 13, 2016 2:03 AM

Answers

  • User-219423983 posted

    Hi Peter Cong,

    According to the following thread you could know that the $(“form”).validate() would not work if your form is not complete when you call the binding function, it will not work for form elements which are added later. To make it work, you’d better call the $('form').validate() function after your ajax request finishes and the elements are loaded in the DOM. Besides, this thread provides a demo and you could have a look.

    http://stackoverflow.com/questions/23930787/form-validation-is-not-working-for-dynamic-dialog-content

    Best Regards,

    Weibo Zhang

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, February 14, 2016 8:54 AM

All replies

  • User-219423983 posted

    Hi Peter Cong,

    You should first use F12 to check whether the JS files are right loaded. Then, you could add the “$.validator.unobtrusive.parse(this);” to enable client side validation.

    For more things, you could refer to the following links. The first one provides a completed demo and the second one has the similar issue.

    https://nickstips.wordpress.com/2011/08/11/asp-net-mvc-ajax-dialog-form-using-jquery-ui/

    http://stackoverflow.com/questions/7764563/mvc-3-client-side-validation-on-jquery-dialog

    Best Regards,

    Weibo Zhang

    Saturday, February 13, 2016 6:32 AM
  • User-1651604128 posted

    Hi Peter Cong,

    You should first use F12 to check whether the JS files are right loaded. Then, you could add the “$.validator.unobtrusive.parse(this);” to enable client side validation.

    For more things, you could refer to the following links. The first one provides a completed demo and the second one has the similar issue.

    https://nickstips.wordpress.com/2011/08/11/asp-net-mvc-ajax-dialog-form-using-jquery-ui/

    http://stackoverflow.com/questions/7764563/mvc-3-client-side-validation-on-jquery-dialog

    Best Regards,

    Weibo Zhang

    Hi Weibo, thanks a lot for your help...

    without using F12 to check, I think he JS files are loaded correctly, by using the debug, I can see these data fields

      accountNumber: $("#AccountNum").val(),
                                letterName
    : $("input[name=letterName]:checked").val(),
                                amended
    : $("input[name=amended]:checked").val(),
                                lanCode
    : $("#LandCode").val()
    are transfered to the controller side, I can see the data in controller.

    Now, the problem is that the client side validation I added in my codes are not triggered for some how. any idea?

    Saturday, February 13, 2016 4:47 PM
  • User-474980206 posted
    You can only pass arguments to validate once. A second call just returns the object. Be sure create is only called once, and it's the only code calling validate. If this is no t true than read the validation docs for adding rules after initial setup.
    Saturday, February 13, 2016 5:58 PM
  • User-1651604128 posted

    You can only pass arguments to validate once. A second call just returns the object. Be sure create is only called once, and it's the only code calling validate. If this is no t true than read the validation docs for adding rules after initial setup.

    Hi Bruce, thanks a lot,

    you hava a good point, it seems my validation hasn't been triggered at all, I am thinking my following codes may not be in the proper location with my other codes,

     $("#myForm").validate({
                            rules: {
                                AccountNum: {
                                    required: true
                                   
                                },
                                Email: {
                                    required: true,
                                    email: true
                                }
                            },
                            messages: {
                                AccountNum: " Account# is required ",
                                Email: {
                                    required: " * ",
                                    email: " Invalid e-mail."
                                }
                            }
                        });
    

    If you combine the above codes with my rest codes, do you think I should change the position or should I completely rewrite it?

    Saturday, February 13, 2016 11:18 PM
  • User-219423983 posted

    Hi Peter Cong,

    According to the following thread you could know that the $(“form”).validate() would not work if your form is not complete when you call the binding function, it will not work for form elements which are added later. To make it work, you’d better call the $('form').validate() function after your ajax request finishes and the elements are loaded in the DOM. Besides, this thread provides a demo and you could have a look.

    http://stackoverflow.com/questions/23930787/form-validation-is-not-working-for-dynamic-dialog-content

    Best Regards,

    Weibo Zhang

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, February 14, 2016 8:54 AM