CODEWITHSUNDEEP
javascriptc#jqueryasp.net-mvc
miechooy
miechooy

Reputation: 3422

How to prevent pass data to Controller

How do I prevent sending model to to Controller if form is not validated?

Razor

@using (Html.BeginForm("Login", "Login", FormMethod.Post))
{
    <div>
        <div class="form-group input-group">
            <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
            @Html.TextBoxFor(model => model.AccountName, new { @id = "accountNameText", @class = "form-control", @placeholder = "Account name" })
        </div>
        <div class="form-group input-group">
            <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
            @Html.TextBoxFor(model => model.Password, new { @id = "accountPasswordText", @class = "form-control", @placeholder = "Password" })
        </div>
        <div class="form-group">
            <button type="submit" class="btn btn-success btn-block" onclick="valideLogin()">Login</button>
        </div>
        <span id="loginStatusMessege" style="color: red">

        </span>
    </div>
}

jQuery

function valideLogin() {
    var accName = $('#accountNameText');
    var accPass = $('#accountPasswordText');

    if (accName.val() === '' || accName.val() === '') {
        $('#loginStatusMessege').html('Account name and password cannot be blank.');
    }
}

After I press Login Button and textboxes are not filled, code succesfully goes into jQuery and response about the error, but still and everytime I am getting into Controller. How do I prevent this action ?

Upvotes: 1

Views: 214

Answers (7)

Smit Patel
Smit Patel

Reputation: 3267

Just use the return false; in the if condition, To prevent the call to controller.

Upvotes: 0

Jamadan
Jamadan

Reputation: 2313

In JQuery:

if (accName.val() === '' || accName.val() === '') {
    $('#loginStatusMessege').html('Account name and password cannot be blank.');
return false;
}

In Markup:

<button type="submit" class="btn btn-success btn-block" onclick="return valideLogin();">Login</button>

Here's the code I tested with:

Markup:

@using (Html.BeginForm("Test", "Home"))
{
    <div>

        <div class="form-group">
            <button type="submit" class="btn btn-success btn-block" onclick="return Test();">Login</button>
        </div>
        <span id="loginStatusMessege" style="color: red">

        </span>
    </div>
}

Javascript:

function Test() {
    return false;
}

This will never get to the action in the controller as the Javascript always returns false.

Upvotes: 0

Satpal
Satpal

Reputation: 133423

Assign an identifier to your form the valid it in the submit event handler.

@using (Html.BeginForm("Login", "Login", FormMethod.Post, new { @id = "myForm")){
}

Bind the submit event using jQuery, in the event handler use event.preventDefault() to cancel the default action of form when condition is not fulfilled.

$("#myForm").submit(function(event){
    var accName = $('#accountNameText');
    var accPass = $('#accountPasswordText');

    if (accName.val() === '' || accName.val() === '') {
        $('#loginStatusMessege').html('Account name and password cannot be blank.');
        event.preventDefault();
    }
})

Upvotes: 4

Hardik
Hardik

Reputation: 228

You can prevent using return statement like this :

function valideLogin() {
    var accName = $('#accountNameText');
    var accPass = $('#accountPasswordText');

    if (accName.val() === '' || accName.val() === '') {
        $('#loginStatusMessege').html('Account name and password cannot be blank.');
    return;
    }
}

Upvotes: 1

nbokmans
nbokmans

Reputation: 5747

If you insist on using jQuery/Javascript to validate your form, just consume the form, change up your valideLogin function slightly:

function valideLogin() {
    var accName = $('#accountNameText');
    var accPass = $('#accountPasswordText');
    return accName.val() !== '' && accPass.val() !== '';
}

Then, add a click event listener to your submit button like this:

$('#submitButton').click(function(event) {
    if (!valideLogin()) {
        event.preventDefault();
    }
}

What this does is: it consumes your click on the submit button event.

P.S: In your provided code example you check if accName is empty twice. Changes that to check accName and accPass in my example for you.

Upvotes: 0

Peter Smith
Peter Smith

Reputation: 5550

You need to add validation to your code or to use Ajax.BeginForm, or both. As you are using Html.BeginForm this will go straight to the controller and will ignore your jQuery.JavaScript.

You need to look at a good tutorial. For example here

Upvotes: 0

NikolaiDante
NikolaiDante

Reputation: 18649

Try adding in return false;:

function valideLogin() {
    var accName = $('#accountNameText');
    var accPass = $('#accountPasswordText');

    if (accName.val() === '' || accName.val() === '') {
        $('#loginStatusMessege').html('Account name and password cannot be blank.');
        return false;
    }
}

Upvotes: 2

Related Questions