Home cshtml validation message text is removed via an unfamiliar jquery function
Reply: 0

cshtml validation message text is removed via an unfamiliar jquery function

user2920 Published in June 20, 2018, 1:23 pm

I am running an MVC 5 web application with an auto-generated Entity Framework data model. It also uses JQuery and JQuery validate. I have a text box on a CRUD screen that must contain a decimal number with 5, 2 precision and scale, respectively.

JQuery validate does not have precision and scale validation, so I have to write a custom JavaScript function for this.

The function disables the submit button when the text box format is incorrect, and displays a message via the @Html.ValidationMessageinner-html text.

It all works, except when tabbing out of the text box field, the message text clears out.

Here is the text box:

        <div class="form-group">
            @Html.LabelFor(model => model.WeeklyAccrual, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.WeeklyAccrual, new { htmlAttributes = new { @class = "form-control", @id = "accrboxCreate", type = "number", onkeyup = "validateAccrualBox(this.value)", name = "weeklyAccruals" } })
                @Html.ValidationMessageFor(model => model.WeeklyAccural, "", new { @class = "text-danger", @id = "accrValidationMessageCreate" })

And here is the validation function:

function validateAccrualBox(v) {
    var regex = new RegExp("^[0-9]{1,5}(?:\.[0-9]{1,2})?$");
    if (regex.test(v) || document.getElementById("accrboxCreate").value === "") {
        //allow text input
        document.getElementById("accrValidationMessageCreate").innerHTML = ""
    } else {
        //don't allow text input
        //display message "too many decimal places"
        document.getElementById("accrValidationMessageCreate").innerHTML = "Correct format: 99999.99"


I have found that the culprit is a Jquery function:

if ( !(eventHandle = elemData.handle) ) {
            eventHandle = elemData.handle = function( e ) {
                // Discard the second event of a jQuery.event.trigger() and
                // when an event is called after a page has unloaded
                return typeof jQuery !== core_strundefined && (!e || jQuery.event.triggered !== e.type) ?
                    jQuery.event.dispatch.apply( eventHandle.elem, arguments ) :
            // Add elem as a property of the handle fn to prevent a memory leak with IE non-native events
            eventHandle.elem = elem;

Does anyone know what is happening here?

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.481838 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO