jquery - 如何使用 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. 从 Popup 的 Submit 按钮中删除了 event.preventDefault();。
3. 添加代码以在 else 条件下打开弹出窗口 $("#confirm-verify").modal("show");。

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

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