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

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

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

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

点击弹出窗口的Submit按钮后，将提交给特定网址。

＆＃13;

$('#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");
	}
});

＆＃13;

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

＆＃13;

Answer 2

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

启用

如果您的输入为空，则可以附加错误，如果不是，则可以删除错误文本，如下面的代码段。

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

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。最好的部分是即时验证。您不必提交表单。

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

4 个答案: