Question 300820 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – How to add form validation to a modal in ASP.NET MVC?

I need to create a form in a modal which has a required field. The user must only be allowed to submit the form once the required field is filled and if it is empty an error message must be displayed. How can we achieve this?

Tags:

3

Answers


  1. 0

    Client-side validation prevents submission until the form is valid. The Submit button runs JavaScript that either submits the form or displays error messages.

    Try to add :

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.12/jquery.validate.unobtrusive.js"></script>

    Below is a demo you can refer to it:

    @model    RabiesClinics.Models.Item

<button id="btnShowModal" type="button"> Upload </button>
<div class="modal fade" id="Modal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button id="btnHideModal" type="button" class="btn btn-secondary" data-dismiss="modal">  ×</button>
            </div>
            <div class="modal-body">
                <form asp-action="Index">
                    <div asp-validation-summary="ModelOnly" class="text-danger"></div>

                    <div class="form-group">
                        <label asp-for="Name" class="control-label"></label>
                        <input asp-for="Name" class="form-control" />
                        <span asp-validation-for="Name" class="text-danger"></span>
                    </div>
                    

                    <div class="form-group">
                        <input type="submit" value="submit" class="btn btn-primary" />
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.12/jquery.validate.unobtrusive.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#btnShowModal").click(function () {

            $("#Modal").modal('show');
        });
        $("#btnHideModal").click(function () {
            $("#Modal").modal('hide');
        });
    });

</script>

    Item:

    public class Item
{
    [Required]
    public string Name { get; set; }    
    
}

    result:

    enter image description here

    You can read Client-side validation to know more.

    Login or Signup to reply.
  2. 0

    If you want to use server side validation you can use data annotations on the model class that is bound to your form. For example you can validate date like in below class:

    public class TransactionModel
{
 [Key]
 public int TransactionID { get; set; }

[MaxLength(12)]
[Required(ErrorMessage ="This field is required.")]
[DisplayName("Account Number")]
[Column(TypeName ="nvarchar(12)")]
public required string AccountNumber { get; set; }

[Required(ErrorMessage = "This field is required.")]
[DisplayName("Beneficiary Name")]
[Column(TypeName = "nvarchar(12)")]
public required string BeneficiaryName { get; set; }

[Required(ErrorMessage = "This field is required.")]
[DisplayName("Bank Name")]
[Column(TypeName = "nvarchar(12)")]
public required string BankName { get; set; }

[MaxLength(11)]
[Required(ErrorMessage = "This field is required.")]
[DisplayName("SWIFT Code")]
[Column(TypeName = "nvarchar(12)")]
public required string SWIFTCode { get; set; }

[Required(ErrorMessage = "This field is required.")]
public int Amount { get; set; }

public DateTime Date { get; set; }
}

    But if you want client side validation you can use the solution given by Qing Guo.
    You can bind submit handler to your form in JavaScript or jQuery and apply your validation.
    There are some jQuery plugins that can also be bound at your front end, you just need to pass your fields (ids or classes) and validation messages and it will take care of your validations.
    Example: https://jqueryvalidation.org/

    Login or Signup to reply.
  3. 0

    To achieve this, you can use a combination of HTML, CSS, and JavaScript/jQuery. Below is an example code snippet demonstrating how you can create a form in a modal with a required field and implement the functionality you described:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modal Form Example</title>
    <style>
        /* Add your CSS styling for the modal and form here */
        #myModal {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 20px;
            background-color: #fff;
            border: 1px solid #ccc;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            z-index: 1;
        }

        .error-message {
            color: red;
            margin-top: 5px;
        }
    </style>
</head>
<body>

<!-- Button to open the modal -->
<button onclick="openModal()">Open Modal</button>

<!-- The Modal -->
<div id="myModal">
    <!-- Modal content -->
    <form id="myForm" onsubmit="return validateForm()">
        <label for="requiredField">Required Field:</label>
        <input type="text" id="requiredField" name="requiredField" required>
        <div class="error-message" id="error-message"></div>
        <br>
        <input type="submit" value="Submit">
    </form>
</div>

<script>
    // Function to open the modal
    function openModal() {
        document.getElementById('myModal').style.display = 'block';
    }

    // Function to close the modal
    function closeModal() {
        document.getElementById('myModal').style.display = 'none';
    }

    // Function to validate the form
    function validateForm() {
        var requiredField = document.getElementById('requiredField').value;
        var errorMessage = document.getElementById('error-message');

        // Check if the required field is empty
        if (requiredField.trim() === '') {
            errorMessage.innerHTML = 'Please fill in the required field.';
            return false; // Prevent form submission
        } else {
            errorMessage.innerHTML = ''; // Clear error message
            closeModal(); // Close the modal if the form is valid
            return true; // Allow form submission
        }
    }
</script>

</body>
</html>

    In this example, the modal is initially hidden (display: none;). When the user clicks the "Open Modal" button, the modal becomes visible. The form inside the modal has a required text input field. The validateForm() function is called when the form is submitted, and it checks whether the required field is empty. If it is, an error message is displayed, and the form submission is prevented. If the field is filled, the error message is cleared, and the modal is closed.

    You can customize the styling and behavior further based on your specific requirements.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search