How to validate dynamic form fields using jquery?

Question

I have a form with multiple input and drop down fields. I need confirmation before submitting. So, I have added dialogue box to confirm form submit by Submit or Cancel and I've prevented default submit.

Now, When I use custom functions to validate input using jquery not working.

Even when I make input field like this:

<form class="form-horizontal" action="{{URL::to('quick/make/reservation')}}" method="post" role="form" id="confirm_request">

    <input type="text" name="contact" id="contact">
    <span id="error">
    </span>
    <a class="btn btn-default" data-toggle="modal" data-target="#confirm-verify" id="done">Done</a>
</form>
<div class="modal fade bd-example-modal-sm" id="confirm-verify" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
        <p class="text-left bold-text">Are you sure you want to Complete Reservation ?</p>
        </div>
        <div class="modal-body">
            <a type="button" class="btn btn-xs btn-danger btn-ok btn-sm" onclick="event.preventDefault();
                    document.getElementById('confirm_request').submit();" style="cursor: pointer;">Submit</a>
            <a type="button" class="btn btn-xs btn-primary btn-sm" data-dismiss="modal">Cancel</a>
        </div>
    </div>
    </div>
</div>

Empty data has been submitted. I'm quite new to JQuery.

$('#done').click(function(event){
        var is_filled = true;
        var value = $('#contact').val();
        if(!value){
            is_filled = false;
        }

        if(!is_filled){
            event.preventDefault();
            $('#error').append('<strong>The field is required </strong>')
        }

    });

Anyone have idea, what I am doing wrong ?

Answer 1

Using JQuery validate plugin you can achieve this kind of validations with ease. Also it provides lot of default validations:

As an example: HTML

<form id="form" method="post" action="#">
<label for="name">Name</label>
<input type="text" name="name" id="name" /><br/>
<label for="email">Email</label>
<input type="email" name="email" id="email" />
<button type="submit">Submit</button>

Validations using JQuery

$(document).ready(function () {
$("#form").validate({
    rules: {
        "name": {
            required: true,
            minlength: 5
        },
        "email": {
            required: true,
            email: true
        }
    },
    messages: {
        "name": {
            required: "Please, enter a name"
        },
        "email": {
            required: "Please, enter an email",
            email: "Email is invalid"
        }
    },
    submitHandler: function (form) { // for demo
        alert('valid form submitted'); // for demo
        return false; // for demo
    }
});});

Here is JSFiddle demo. The best part is the validation happens on the fly. You don't have to submit the form.

Answer 2

You can use html5 form validation, in your case i would use 'required' attributes, then Use the submit event instead of click and do preventDefault, then use form.checkValidity function to see if it's valid, after this test you can add your own validations and send the data via ajax instead of form submition

Answer 3

Here is the example of your code where I've changed some code. I hope it will work. I have done below changes on your code.

1. Removed data-toggle="modal" data-target="#confirm-verify" from your Done button, because popup opens even if code is validated.
2. Removed event.preventDefault(); from Submit button of Popup.
3. Added code to open popup $("#confirm-verify").modal("show"); in the else condition.

Now if you have not entered value in textbox it will be validated and popup will not open. When you enter something on textbox end click on 'Done` button the popup will open because you have entered value in it.

After Clicking on Submit button of popup, will submit to the particular url.

$('#done').click(function(event){
	var is_filled = true;
	var value = $('#contact').val();
	if(!value){
		is_filled = false;
	}

	if(!is_filled){
		event.preventDefault();
		
		$('#error').html('<strong>The field is required </strong>')
		
	} else {
		$("#confirm-verify").modal("show");
	}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<form class="form-horizontal" action="get-data" method="post" role="form" id="confirm_request">
{{csrf_field()}}
    <input type="text" name="contact" id="contact">
    <span id="error">
    </span>
    <a class="btn btn-default" href="javascript:;" id="done">Done</a>
</form>
<div class="modal fade bd-example-modal-sm" id="confirm-verify" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
        <p class="text-left bold-text">Are you sure you want to Complete Reservation ?</p>
        </div>
        <div class="modal-body">
            <a type="button" class="btn btn-xs btn-danger btn-ok btn-sm" onclick="document.getElementById('confirm_request').submit();" style="cursor: pointer;">Submit</a>
            <a type="button" class="btn btn-xs btn-primary btn-sm" data-dismiss="modal">Cancel</a>
        </div>
    </div>
    </div>
</div>

Answer 4

I would suggest to make disable submit button with $("#submit").attr("disabled",true) if there is an error about your input. If not make enable with $("#submit").attr("disabled",false)

You can append error if your input is null and if not you can remove your error text like following snippet.

$('#done').click(function(event){
        var value = $('#contact').val();

        if(!value){
            $("#submit").attr("disabled",true);
            $('#error').append('<strong style="color:red">The field is required </strong>')
        }
        else
        {
            $("#submit").attr("disabled",false);
            $("#error strong").remove();
        }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form class="form-horizontal" method="post" role="form" id="confirm_request">

    <input type="text" name="contact" id="contact">
    <span id="error">
    </span>
    <a class="btn btn-default" data-toggle="modal" data-target="#confirm-verify" id="done">Done</a>
</form>
<div class="modal fade bd-example-modal-sm" id="confirm-verify" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
        <p class="text-left bold-text">Are you sure you want to Complete Reservation ?</p>
        </div>
        <div class="modal-body">
            <input value="Submit" type="button" id="submit" class="btn btn-xs btn-danger btn-ok btn-sm" onclick="" style="cursor: pointer;"></input>
            <input value="Cancel" type="button" class="btn btn-xs btn-primary btn-sm" data-dismiss="modal"></input>
        </div>
    </div>
    </div>
</div>