neda Derakhshesh neda Derakhshesh - 1 month ago 4
CSS Question

How to validate inputs before opening a modal for submit button

I have a form which it works fine .I want to show users a succeed message after they submit their forms in a modal. but I want to check if inputs are empty user's cannot submit their forms, I mean I don't want the modal opens in this situation, just near the submit button shows an error "please fill the form and then submit" and when user fills the form, and submit successfully, then modal page opens to show user the message that your form posted successfully.

here is my form:

@using (Html.BeginForm("Create", "Contact_Us"))
{
@Html.AntiForgeryToken()

<div class="form-horizontal">



<div class="form-group">
@Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2 txtformat" })
<div class="col-md-12">
@Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
</div>
</div>

<div class="form-group">
@Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label col-md-2 txtformat" })
<div class="col-md-12">
@Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
</div>
</div>

<div class="form-group">
@Html.LabelFor(model => model.Phone, htmlAttributes: new { @class = "control-label col-md-2 txtformat" })
<div class="col-md-12">
@Html.EditorFor(model => model.Phone, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Phone, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group hidden">
@Html.LabelFor(model => model.Date, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Date, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Date, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Message, htmlAttributes: new { @class = "control-label col-md-2 txtformat" })
<div class="col-md-12 contactusmsg">
@Html.TextAreaFor(model => model.Message, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Message, "", new { @class = "text-danger" })
</div>
</div>

<div class="form-group contactuspostbtn">
<div class="col-md-12">
<input id="postcontactusmessage" type="submit" value="Send" class="btn btn-default" data-toggle="modal" data-target="#myModal" />
</div>

</div>
</div>
}


and this is my modal :

<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"></h4>
</div>
<div class="modal-body">
<p>@ViewBag.ResultMessage</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>

</div>
</div>


the problem is now when user click on submit button when inputs are empty, modal page is showing. while I don't want it.

Appreciate any help.

Answer

You can check if form is valid before show modal(on submit or click event). Let's say you are using bootstrap modal then you can use something like:

if ($('form').valid()) {
    $('modal').modal('show')
}
Comments