jQuery UI Dialog + validate + number

Question

I want to validate a jQuery UI Dialog with the jQuery validate function, but I have some problems. I want to get a simple example to work, where I validate the text of an input field - the field should be required to contain data, which should represent a number. Please see the code below. How could I accomplish this?

<head>
    <script src="../Scripts/jquery-1.9.0.min.js" type="text/javascript"></script>
    <script src="../Scripts/jquery-ui-1.9.2.custom.min.js" type="text/javascript"></script>
    <script src="../Scripts/jquery.validate.min.js" type="text/javascript"></script>
    <link href="../Styles/jquery-ui-1.9.2.custom.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
    #field { margin-left: .5em; float: left; }
    #field, label { float: left; font-family: Arial, Helvetica, sans-serif; font-size: small; }
    br { clear: both; }
    input { border: 1px solid black; margin-bottom: .5em;  }
    input.error { border: 1px solid red; }
    label.error {
        background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/unchecked.gif') no-repeat;
        padding-left: 16px;
        margin-left: .3em;
    }
    label.valid {
        background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.gif') no-repeat;
        display: block;
        width: 16px;
        height: 16px;
    }
</style>
<script type="text/javascript">
    var validationNumber = null;
    function GetNumberValidator() {
        return $("#FormToValidate").validate({
            rules: {
                TextToValidate: {
                    required: true,
                    digits: true
                }
            }
        });
    }
    $(function () {
        $("#button1").button();
        $("#dialog-message").dialog({
            autoOpen: false,
            modal: true,
            buttons: {
                Ok: function () {
                    if (validationNumber.element("#TextToValidate")) {                  
                        $(this).dialog("close");
                    }
                }
            }
        });
    });
    $().ready(function () {
        $("#button1").click(function () {
            $("#dialog-message").dialog("open");
        }
        );
        validationNumber = GetNumberValidator();
    });        
</script>
<title>Dialog Number</title>
</head>
<body>
<button id="button1">A button element</button>    
<form id="FormToValidate" action="DialogNumber.html" method="post">   
<div id="dialog-message" title="Input">
    <input id="TextToValidate" name="TextToValidate" type="text" />
    <div id="ErrorMessage"></div>
</div>
</form>
</body>

Might be the duplicate of stackoverflow.com/questions/3825469/jquery-ui-dialog-validate — Pitchai P
– Pitchai P, Commented Jan 16, 2013 at 15:36

politus · Accepted Answer · 2013-01-16 17:54:03Z

a simple example might have html like this

<body>
    <a href="#">open the dialog</a>
    <div id="dialog">
        <form>
         <input name="TextToValidate" class="required number" />
         <input type="submit" />
        </form>
    </div>
</body>

and a script like this in your document ready function

$('form').validate();
$("#dialog").dialog({ autoOpen: false });
$('a').click(function () {
    $("#dialog").dialog("open");
});

that is it, or you might need to hook into the beforeClose event to do some stuff if your form is not valid:

$("#dialog").dialog({ autoOpen: false,
    beforeClose: function () {
        if (!$('form').valid()) {
            alert('form not valid');
            return false;
        }
    }
});

fiddle is here - http://jsfiddle.net/Jj9Pt/

Collectives™ on Stack Overflow

jQuery UI Dialog + validate + number

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related