How to validate before request

Question

I want to check data before sending it to the server side, On my code I want to run the js validation and cancel the request if fromid >= toid

My code

jQuery('#btndeletereg').click(function () {
    if (jQuery('#txtuserrangefrom').val() >= jQuery('#txtuserrangeto').val()) {
        alert("Range is not possible");
    }
});

<label for="txtuserrangefrom">From User ID</label>
<input id="txtuserrangefrom" name="txtuserrangefrom" type="number" />
<span>&nbsp&nbsp&nbsp</span>
<label for="txtuserrangeto">To User ID</label>
<input id="txtuserrangeto" name="txtuserrangeto" type="number" />
<input id="btndeletereg" class="btn" type="button" value="Delete all users in range" onclick="location.href='@Url.Action("DeleteRangeUsers", "ControlPanel")?fromid=' + $('#txtuserrangefrom').val() + '&toid=' + $('#txtuserrangeto').val()" />
<br />

Thanks in advance

P.S
I debugged my code and it seems that Get request trigged before JS function

EDIT:
problem solved,
deleted the "onclick" event from my html input tag and put it in my jquery code as you all recommended.
Thank you all

Maybe [asp.net mvc client side validation not working](http://stackoverflow.com/q/21985782/205233) has some hints for you. — Filburt, Sep 28 '16 at 09:00
Since you are binding the click event and you are writing validation logic in it. Then, you can place your `location.href...` code inside that function and make sure it will execute only after the data is validated — Bharadwaj, Sep 28 '16 at 09:02

Alexis · Answer 1 · 2016-09-28T09:21:11.120

Don't use onclick attribute, redirect your application in the same function.

More clear and maintanable.

jQuery('#btndeletereg').click(function (e) {
    if (jQuery('#txtuserrangefrom').val() >= jQuery('#txtuserrangeto').val()) {
      alert("Range is not possible");
      return false;
    }
    else
    {
      alert("ok");
      window.location.href="yoururl";
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="txtuserrangefrom">From User ID</label>
<input id="txtuserrangefrom" name="txtuserrangefrom" type="number" />
<span>&nbsp&nbsp&nbsp</span>
<label for="txtuserrangeto">To User ID</label>
<input id="txtuserrangeto" name="txtuserrangeto" type="number" />
<input id="btndeletereg" class="btn" type="button" value="Delete all users in range" />
<br />

Govinda Rajbhar · Answer 2 · 2016-09-28T09:13:17.607

<input id="btndeletereg" class="btn" type="button" value="Delete all users in range" onclick="location.href='@Url.Action("DeleteRangeUsers", "ControlPanel")?fromid=' + $('#txtuserrangefrom').val() + '&toid=' + $('#txtuserrangeto').val()" />

This one is not working because on your button click you are redirecting on DeleteRangeUsers action of your ControlPanel controller this is the main issue

Remove your button onclick event and redirect using jquery code as follow.

jQuery('#btndeletereg').click(function (e) {
    if (jQuery('#txtuserrangefrom').val() >= jQuery('#txtuserrangeto').val()) {
      alert("Range is not possible");
      return false;
    }            
    window.location.href='@Url.Action("DeleteRangeUsers", "ControlPanel")?fromid=' + $('#txtuserrangefrom').val() + '&toid=' + $('#txtuserrangeto').val();    
});

Bharadwaj · Answer 3 · 2016-09-28T09:25:01.910

By looking at your code, you need to remember this,

First thing, you have click event in the html element tag, and another click event is you are binding through JQuery. The fact is, JQuery appended your click event to the one which is already there, so it will be after the click event which is there in html. Because of this, your JQuery click event is triggered later.
My suggestion is to place the logic which you have written in the html onclick into the jq click event which you are binding.
So your code will be,

JavaScript

jQuery('#btndeletereg').click(function () {
    if (jQuery('#txtuserrangefrom').val() >= jQuery('#txtuserrangeto').val()) {
        alert("Range is not possible");
    }else{
        //Your logic which you prefer after validation is success
    }
});

HTML

<label for="txtuserrangefrom">From User ID</label>
<input id="txtuserrangefrom" name="txtuserrangefrom" type="number" />
<span>&nbsp&nbsp&nbsp</span>
<label for="txtuserrangeto">To User ID</label>
<input id="txtuserrangeto" name="txtuserrangeto" type="number" />
<input id="btndeletereg" class="btn" type="button" value="Delete all users in range"/>
<br />

OR

There is another way, don't bind the event in the JQuery. Instead create a validation function which will return boolean, and call it before your login in onclick.

JavaScript

function validate() {
    if (jQuery('#txtuserrangefrom').val() >= jQuery('#txtuserrangeto').val()) {
        alert("Range is not possible");
        return false;
    }
    return true;
}

html

<label for="txtuserrangefrom">From User ID</label>
<input id="txtuserrangefrom" name="txtuserrangefrom" type="number" />
<span>&nbsp&nbsp&nbsp</span>
<label for="txtuserrangeto">To User ID</label>
<input id="txtuserrangeto" name="txtuserrangeto" type="number" />
<input id="btndeletereg" class="btn" type="button" value="Delete all users in range" onclick="return validate();location.href='@Url.Action("DeleteRangeUsers", "ControlPanel")?fromid=' + $('#txtuserrangefrom').val() + '&toid=' + $('#txtuserrangeto').val()" />
<br />

score 0 · Answer 4 · answered Sep 28 '16 at 08:58

0

Try this

$('#btndeletereg').click(function (e) {
    if ($('#txtuserrangefrom').val() >= $('#txtuserrangeto').val()) {
        e.preventDefault();
        alert("Range is not possible");
        return false;
    }
});

answered Sep 28 '16 at 08:58

Aleksandar Matic

789
1
9
21

How to validate before request

4 Answers4