Question

我正在尝试创建一个表单以添加新用户。在我填满所有文本框之前，提交按钮将保持禁用状态。但是，一旦我正确填写了所有文本框，便会启用它。

这是问题所在。单击提交按钮后，用户将被添加到表中，但是该表单没有关闭。文本框将清除，并全部显示错误消息。

我还在head标签之前添加了样式input.ng-invalid.ng-dirty {border：1px纯红色；}。

<form name="addForm"class="form-horizontal" action="/action_page.php">

                            <div class="form-group">
                                <label class="control-label col-sm-2">Email</label>
                                <div class="col-sm-10">
                                    <input type="email" class="form-control" name="addEmail" placeholder="Enter Email" ng-model="newUser.email" required>
                                    <span ng-show="addForm.addEmail.$dirty && addForm.addEmail.$error.required">Enter Email</span>
                                    <span ng-show="addForm.addEmail.$dirty && addForm.addEmail.$error.email">Invalid Email</span>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label col-sm-2">First Name</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" name="addFirstName" placeholder="Enter First Name" ng-model="newUser.firstName" required>
                                    <span ng-show="addForm.addFirstName.$dirty && addForm.addFirstName.$error.required">Enter First Name</span>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label col-sm-2">Last Name</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" name="addLastName" placeholder="Enter Last Name" ng-model="newUser.lastName" required>
                                    <span ng-show="addForm.addLastName.$dirty && addForm.addLastName.$error.required">Enter Last Name</span>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label col-sm-2">Contact</label>
                                <div class="col-sm-10">
                                    <input type="tel" class="form-control" name="addContact" placeholder="Enter Contact" ng-model="newUser.contact" required>
                                    <span ng-show="addForm.addContact.$dirty && addForm.addContact.$error.required">Enter Contact</span>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label col-sm-2">Role</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" name="addRole" placeholder="Enter Role" ng-model="newUser.role" required>
                                    <span ng-show="addForm.addRole.$dirty && addForm.addRole.$error.required">Enter Role</span>
                                </div>
                            </div>                        

                            <div class="form-group">
                                <div class="col-sm-offset-2 col-sm-10">
                                    <button ng-disabled="addForm.$invalid" type="submit" class="btn btn-default" ng-click="saveUser()" data-dismiss="modal">Submit</button>
                                </div>
                            </div>
                        </form>
			<div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>

Answer 1

这就是我的做法：

将表格放入div

<div class="contact-form">
    <form method="post" action="sendemail.php" id="contact-form">
        <!-- FORM CONTENT HERE -->
    </form>
</div>

然后，将其添加到脚本文件中（请注意，代码$('#contact-form').hide()将在帖子后隐藏您的表单）：

//Contact Form Validation
$('#contact-form').on('submit', function(event) {
    event.preventDefault();
    var $inputs = $('#contact-form :input');

    // not sure if you wanted this, but I thought I'd add it.
    // get an associative array of just the values.
    var data = {};
    $inputs.each(function() {
        data[this.name] = $(this).val();
    });

    $.ajax({
        url: '/send-mail',
        data: data,
        method: 'post'
    })
    .then(function success(res) {
         console.log('Success!');
         var s1 = document.getElementById('contact-title');
         s1.innerHTML = 'Form sent with success.';
         $('#contact-form').hide()
    })
    .catch(function error(err) {
         console.error(err);
         var s2 = document.getElementById('contact-title');
         s2.innerHTML = 'Errors sending your form...';
         $('#contact-form').hide()
    })
});

希望您可以在这里找到答案。

使用ng-Show，ng-disabled表单无法在提交按钮上关闭

1 个答案: