CODEWITHSUNDEEP
htmlasp.netasp.net-mvcrazorasp.net-mvc-5
Ugine
Ugine

Reputation: 143

Input box validation

I am trying to check if my input boxes are empty.

before submitting the information i have a pop up box that ensure if my user really wanted to create a content.

<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!— Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Confirmation</h4>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to add the exercise(s)?</p>

            </div>
            <div class="modal-footer">
                <input type="submit" class="btn btn-default" value="Confirm"/>
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>
<input type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal" value="Save All"/>

As seen above the input="submit" is inside the popup box. This "submit" button will trigger the validation check for the input box.

However right now i wish to trigger the validation even before the pop up box appear. Which means i would like to validate the information when the input type="button" is triggered.

Any idea how i can do it?

Upvotes: 1

Views: 88

Answers (2)

Satej S
Satej S

Reputation: 2156

You can try this approach

HTML

<input type="button" class="btn btn-default" onclick="function1();" data-toggle="modal" data-target="#myModal" value="Save All"/>

JS Perform your validation in function1(), and if everything is alright, then return true , else return false.

<script>
function function1()
    {
        console.log("This is called first");
        x=false;
        if(x)
        return true
        else
        return false;
    }


</script>

Upvotes: 1

hutchonoid
hutchonoid

Reputation: 33306

You manually validate with $("#fooForm").valid(), replacing (fooForm with your form id).

You could hook into the modal api to do this;

$('#myModal').on('show.bs.modal', function (e) {

    if($("#myform").valid()){
        // the form is valid
    } else{
        // the form is invalid, stop the modal from being shown
        return e.preventDefault() // stops modal from being shown
    }

})

Upvotes: 2

Related Questions