仅当使用引导程序填写所有必需的 attr 字段时，如何提交表单？

Question

只有当所有输入字段都具有required="required" 属性时，我才必须提交表单。

我的表格：

<form method="post" action="/actions.php/" data-js-validate="true" data-js-highlight-state-msg="true" data-js-show-valid-msg="true">
    <input type="text" name="amount[]" required="required" placeholder="Amount" class="inputChangeVal" data-js-input-type="number" />
    <input type="text" name="grade[]" required="required" placeholder="Amount" class="inputChangeVal" data-js-input-type="number" />
    <button class="btn" type="submit" name="confirm" >Pay Now</button>
</form>

我想在显示消息框后提交表单。 如您所见，我的表单操作是另一个 php 文件。 所以我阻止默认行为，然后在单击继续按钮时发送表单。 我为此使用引导程序。

引导模型：

<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Proccess Payment</h4>
            </div>
            <div class="modal-body">
                <p>
                "Your about to make a online payment. Click 'Edit' to review the data before proceeding or click 'Continue' to confirm the details for payment."
                </p>
                <button class="btn btn-default" data-dismiss="modal">Edit</button>
                <button class="btn btn-primary" id="continuebtn">Continue</button>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

还有 jQuery：

<script>
    jQuery( document ).ready(function() {
    /* for boot strap model */
        jQuery('#payBtn').on('click',function(e){
            e.preventDefault();
            jQuery('#myModal').modal('toggle');

        });

        jQuery('#continuebtn').on('click',function(){
            jQuery('form').submit();
        });
    });
</script>

但是如果我点击按钮Continue 按钮，这个发送来自。 无论输入字段是否填写..

我想要的是只有在填写 required="required" 的文件时才应提交表单..

我该怎么做？

Answer 1

首先在提交按钮上添加一个名为“payBtn”的 id 属性。

之后

用你当前的js替换下面的jquery

<script>
jQuery( document ).ready(function() {
    jQuery('#payBtn').on('click',function(e){
        e.preventDefault();
        var empty = false;
        jQuery('input:text').each(function(){
            if(jQuery(this).val()==''){
                console.log('error');
                empty = false;
            } else empty = true;
        });
        if(empty)
            jQuery('#myModal').modal('toggle');
        else
            console.log('your error message');
    }); 

    jQuery('#continuebtn').on('click',function(){
        jQuery('form').submit();
    });
});

Answer 2

    $('form').on('submit', function(event){
      event.preventDefault();
      event.stopPropagination();
      var check = true;
      $('*[requiered]').each(function(){
         // run other filter functions here
         if($(this).val().trim().length < 1){
           check = false;
         } 
´     });  
      if(!check){
        alert('something is missing');
      } else {
        // all is fine
        $(this).submit();
      }
    })

这样的？

Answer 3

您可以在 jQuery 函数中添加一些条件：

  jQuery('#continuebtn').on('click',function(){
         if($("#myInput").val() != "")
         {
            jQuery('form').submit();
         }
    });

这样，您可以为每个输入执行特定操作。

但是还有另一种方法是同时检查所有包含“必需”属性的输入

var missingFieldCounter = 0; // we count the number of field missing
jQuery('#continuebtn').on('click',function(){
    $(':input[required]').each(function() // for each input that contains "required" attribute
    {
        if($(this).val() == "") // if the required input is not filled
        {
            missingFieldCounter+=1; 
            $(this).after("<b>You have to fill this field</b>"); // we print a message after the input
        }
    });

    if(missingFieldCounter == 0) // if the counter has never been incremented (every field is filled)
    {
        jQuery('form').submit();
    }
});

See the fiddle Here

Answer 4

这是一个工作示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test-Projekt</title>
    <meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=10">
    <link href="favicon.ico" rel="Shortcut icon">
</head>
<body>
    <form action="" method="GET">
        <div>
            <label>required input</label>
        </div>
        <div>
            <input type="text" name="myInput" required>
        </div>
        <div>
            <button id="btn_submit" type="submit">Submit Form</button>
        </div>
    </form>
</body>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"
        integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
        crossorigin="anonymous">
</script>
<script type="application/javascript">
    $(document).ready(function(){
        $('#btn_submit').on('click', function(event){
            event.preventDefault();
            event.stopPropagation();
            var formElement = $(this).parents('form');
            formElement.find('input:required').each(function(){
                var minLength = 1;
                var value = $(this).val();
                var checked = true;
                if(value.trim().length < minLength) {
                    console.log('length is not ok');
                    checked = false;
                }

                if(!checked){
                    console.log($(this).attr('name') + ' is not correctly filled!');
                } else {
                    console.log('all is ok');
                    formElement.submit();
                }
            });
        });
    });
</script>
</html>

顺便说一句。如果您使用 html 5 并且您不执行任何操作，则现代浏览器将自动检查每个具有所需属性的输入。这就是原因，因为如果不需要过滤特殊字符的字段，我不会使用它。

Answer 5

如果$('#formid').submit()没有像我们点击提交按钮那样显示缺失的字段，那么创建一个隐藏的提交按钮并模拟点击呢？

如果您在表单中添加以下内容：

<input id="send" type="submit" style="display: none"/>

现在是 JavaScript 部分：

    $(document).ready(function(){
        $('#continuebtn').on('click', function(event){
            $('#send').trigger('click');
        })
    });

您会看到，当您单击#continuebtn 时，您会看到缺少的字段。

浏览器已经知道缺少的字段在哪里。重用它而不是编写 jquery 调用并重新发明轮子，效率更高。

我相信这不是最好的解决方案，但它只需要对我们的代码库进行很少的修改即可。

Answer 6

您可以通过在输入类型中包含 required 来轻松地创建必填字段。 我的例子：

<div class="contact-form-value">
<input required type="text" name="PhoneNumber" id="phonenumber">
</div>