如何使用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

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 2

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> 

Answer 3

您可以使用html5表单验证，在您的情况下我会使用'required'属性，然后使用submit事件而不是click并执行preventDefault，然后使用form.checkValidity函数查看它是否有效，在此测试后您可以添加自己的验证并通过ajax而不是form submition发送数据

Answer 4

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.