error validation with jquery validator plugin

StackOverflow https://stackoverflow.com/questions/17112073

  •  31-05-2022
  •  | 
  •  

Question

this is the complete source for my problem. I'm not able to display a list of the error messages and elements within the errorContainer. i.e. if I haven't completed Address1 and Address2 I'm struggling to state this within the errorContainer? Is this possible? Many thanks, james

    $(function () {
        var validator = $("#mytestform").validate({
            rules: {
                "data.Telephone": { number: true },
                "data.Mobile": { number: true },
                "data.Address1": { number: true },
                "data.Address2": { number: true }
            }, 
            messages: {
                "data.Telephone": "Please enter telephone number",
                "data.Mobile": "Please enter mobile number",
                "data.Address1": "Please enter address 1",
                "data.Address2": "Please enter address 2"
            },
            errorContainer: $('#errorContainer'),
            invalidHandler: function () {
                $("#errorContainer").addClass(' error').text(validator.numberOfInvalids() + " field(s) are invalid");
            }
        });
    });

</script>

<style type="text/css">
    label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
</style>

</head>

<body>
<form id="mytestform" method="get">

    <input name="data.Telephone" id="data.Telephone" class="required" />
    <br/>
    <input name="data.Mobile" id="data.Mobile" class="required" />
    <br/>
    <input name="data.Address1" id="data.Address1" class="required" />
    <br/>
    <input name="data.Address2" id="data.Address2" class="required" />
    <br/>
    <input type="submit" value="GO"/>

    <br/><br/>

    <div id="errorContainer">

    </div>

</form>

Was it helpful?

Solution

this is the solution.

invalidHandler: function () {
        $('#errorContainer').html('<ul>').addClass('errorContainer');
        for (var i = 0; i < validator.errorList.length; i++) {
            $('#errorContainer').append('<li>' + validator.errorList[i].message + '</li>');
        }
        $('#errorContainer').appendTo('</ul>');
    },
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top