jQuery custom validation in asp.net mvc 3 razor view

Question

I have very basic knowledge about JS/jQuery. I need to perform check on the value of certain text boxes. The example just recreates the problem I heave with the real application which is a lot bigger and the tables are dynamically created based on a data from a data base, so in run time I add the classes on which I base my jQuery logic.

Here is the jsfiddle example - http://jsfiddle.net/Xhnbm/

There are three different checks I need to do - for float, for string length and for float, however you may see that the validations is not performed I always get the integer exception and even if you remove the integer check the validation is not working either, so I guess the problem is not in the functions themselves but somewhere else.

Thanks for help.

P.S

It seem I can't submit the question without adding code. All the code is in the jsfiddle example but since I need to add some here too, I think that the problem is either in the way I declare may functions that perform the check or here :

$('#submitDocument').click(function () {
            try {
                if ($(".checkString16").val().length > 16) {
                    throw "The text can be up to 16 symbols";
                } else if (!mathFunctions.isInt($(".checkULong").val())) {
                    throw "Insert integer";
                } else if (!mathFunctions.isFloat($(".checkFloat").val())) {
                    throw "Insert float";
                }
                validationResult = true;
            } catch (exc) {
                alert(exc)
                validationResult = false;
            }
            return validationResult;
        });

in the way I try to execute the validation when the submit button is clicked. But being no Js programmer at all I don't want to point you to wrong directions.

You should rather try $(".checkString16 input[type='text']").each(function(){ if($(this).val().length > 16) { /* your code here*/ } }); etc. Notice that You aren't checking .val() for input, but for span, which results in error. — Kamil T
– Kamil T, Commented May 28, 2013 at 6:53
Ok, most of the things that you say think I understand. I also have some doubts about the spans and how they interfere with the codeflow but can you provide any implementation of the recommendations you give, even just something basic which I could develop to what I need to. — Leron
– Leron, Commented May 28, 2013 at 7:00

Kamil T · Accepted Answer · 2013-05-28 07:20:54Z

1

$('#submitDocument').click(function () {
        var validationResult = true;
            if ($(".checkString16 input[type='text']:first").val().length > 16) {
                validationResult=false;
            } else if (!mathFunctions.isInt($(".checkULong input[type='text']:first").val())) {
                validationResult=false;
            } else if (!mathFunctions.isFloat($(".checkFloat input[type='text']:first").val())) {
                validationResult=false;
            }
        return validationResult;
    });

This should do the trick. If the #submitDocument is a input type='submit' and you use it to submit the form, you should try this way:

$('#submitDocument').click(function (e) {
            if ($(".checkString16 input[type='text']:first").val().length > 16) {
                e.preventDefault();
            } else if (!mathFunctions.isInt($(".checkULong input[type='text']:first").val())) {
                e.preventDefault();
            } else if (!mathFunctions.isFloat($(".checkFloat input[type='text']:first").val())) {
                e.preventDefault();
            }
    });

The e.preventDefault() will prevent the submit button from doing it default handler, which is submitting the form.

You can always submit the form manually from the code, using $("#formId").submit();

PS. Make sure that you are also validating those values in code behind, because simple jquery validation is easy to come around.

edited May 28, 2013 at 7:20

answered May 28, 2013 at 7:06

Kamil T

2,2161 gold badge19 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Leron Over a year ago

Yes, it's like you guess but I think this is visible in the fiddle example. However it seems that the logic that checks for integer and float is broken itself. I'm not completely sure, but it seems like it. I'm gonna accept your answer and see what else is going wrong. Thanks.

Kamil T Over a year ago

You can try with: !mathFunctions.isInt(parseInt($(".checkULong input[type='text']:first").val())) and !mathFunctions.isFloat(parseFloat($(".checkFloat input[type='text']:first").val())). I think that the val() function returns the text and you need to parse it first. For more info about float/int parsing itself, have a go at stackoverflow.com/questions/1272696/…

Leron Over a year ago

Yeah, back end is much more clear for me. Your code is working fine, it really was the logic in the validation functions that didn't work. I'll see you other suggestions and see how deep I'll go with this. Thanks a lot for the support.

Collectives™ on Stack Overflow

jQuery custom validation in asp.net mvc 3 razor view

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related