如何使用 jquery 验证动态表单字段？

Question

我有一个包含多个输入和下拉字段的表单。我需要在提交前确认。所以，我添加了对话框来确认Submit 或Cancel 提交的表单，并且我已经阻止了默认提交。

现在，当我使用自定义函数来验证使用 jquery 的输入时不起作用。

即使我这样输入字段：

<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>

已提交空数据。我对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>')
        }

    });

任何人都知道，我做错了什么？

Answer 1

这是我更改了一些代码的代码示例。我希望它会奏效。我对您的代码进行了以下更改。

1. 从您的Done 按钮中删除了data-toggle="modal" data-target="#confirm-verify"，因为即使验证了代码也会打开弹出窗口。
2. 从弹出窗口的Submit 按钮中删除了event.preventDefault();。
3. 添加代码以在 else 条件下打开弹出窗口 $("#confirm-verify").modal("show");。

现在，如果您没有在文本框中输入值，它将被验证并且不会打开弹出窗口。当您在文本框末尾输入内容时，单击“完成”按钮，弹出窗口将打开，因为您在其中输入了值。

点击弹出窗口的Submit按钮后，将提交到特定的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

如果您的输入有错误，我建议使用$("#submit").attr("disabled",true) 禁用提交按钮。如果不启用$("#submit").attr("disabled",false)

如果您的输入为空，您可以附加错误，如果不是，您可以删除错误文本，如以下 sn-p。

$('#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 表单验证，在您的情况下，我会使用“必需”属性，然后使用提交事件而不是单击并执行 preventDefault，然后使用 form.checkValidity 函数查看它是否有效，在此测试之后您可以添加您自己的验证并通过 ajax 而不是表单提交来发送数据

Answer 4

使用 JQuery 验证插件，您可以轻松实现此类验证。它还提供了很多默认验证：

例如：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>

使用 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
    }
});});

这里是JSFiddle demo。最好的部分是验证是即时进行的。您不必提交表单。