仅当使用bootstrap填充所有必需的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文件。所以我阻止默认行为，然后如果单击继续按钮发送表单。我使用bootsrap。

Bootstrap模态：

<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按钮，这个发送。无论输入字段是否填充..

我想要的是只有填写字段qazxsw poi时才应提交表单。

我怎样才能做到这一点？

Answer 1

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

之后

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

required="required"

Answer 2

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

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

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

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

但是还有另一种方法，即检查包含“required”属性的所有输入

  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();
    }
});

Answer 4

这是一个工作样本

See the fiddle Here

顺便说说。如果您使用html 5并且您没有做任何事情，那么现有浏览器会自动检查所有带有必需属性的输入。这是因为我不使用它，如果不必过滤特殊字符的字段。

Answer 5

如果

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

没有像我们点击提交按钮那样显示缺少的字段，那么创建隐藏的提交按钮并模拟点击怎么样？

如果您在表单中放入以下内容：

$('#formid').submit()

现在的JavaScript部分：

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

您会看到当您点击#continuebtn时，您将获得缺少的字段。

浏览器已经知道缺少字段的位置。重用它而不是编写jquery调用并重新发明轮子会更有效率。

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