带bootstrap3表单的Javascript/jQuery链排序

好的，这是我的情况

我已经使用Bootstrap 3构建了一个响应性登录页面，该页面通过我们的电子邮件/登录页面营销自动化工具Marketo托管。这个页面的目的是为了获取潜在客户，所以现在我在页面上有两个表单，一个是反应灵敏、美观的引导表单，另一个是隐藏表单，所有信息都是通过它提交的

实际上提交信息的隐藏表单是在Marketo中预先构建的。他们将表单设计为通过在所见即所得编辑器中拖放或手动嵌入来实现。问题是，它们并不是为了完全响应而构建的，这是一个让人头疼的问题，让身体按照我想要的方式表现是不值得的，这导致了我采用这种方法

我遇到的问题是，我的隐藏表单在收到来自引导表单的有效输入后，实际上没有提交信息

我需要帮助完成的解决方案是编写一系列javascript代码，告诉引导表单验证输入。当所有输入有效时，将所有信息传递到隐藏表单，然后提交。只需单击引导按钮即可完成所有操作

这是我为表单编写的javascript/JQuery代码

$(document).ready(function () {
        var validator = $("#resBSForm").bootstrapValidator({
            fields : {
                FirstName : {
                    message : "First name is required",
                    validators : {
                        notEmpty : {
                            message : "Please provide your first name"
                        }
                    }
                },
                LastName : {
                    message : "Last name is required",
                    validators : {
                        notEmpty : {
                            message : "Please provide your last name"
                        }
                    }
                },
                Title : {
                    message : "Job title is required",
                    validators : {
                        notEmpty : {
                            message : "Please provide your job title"
                        }
                    }
                },
                Email : {
                    message : "Email address is required",
                    validators : {
                        notEmpty : {
                            message : "Please provide a valid email address"
                        },
                        emailAddress : {
                            message : "Email address was invalid"
                        }
                    }
                },
                Phone : {
                    message : "Phone number is required",
                    validators : {
                        notEmpty : {
                            message : "Please provide a valid phone number"
                        }
                    }
                },
                Company : {
                    message : "Company name is required",
                    validators : {
                        notEmpty : {
                            message : "Please provide your company name"
                        }
                    }
                },
                NumberOfEmployees : {
                    validators : {
                        notEmpty : {
                            message : "Please select your number of employees"
                        }
                    }
                },
                callDate : {
                    validators : {
                        notEmpty : {
                            message : "Please select your call date"
                        }
                    }
                },
                callTime : {
                    validators : {
                        notEmpty : {
                            message : "Please select a call time"
                        }
                    }
                },
                timeZone : {
                    validators : {
                        notEmpty : {
                            message : "Please select your time zone"
                        }
                    }
                }
            }

        });
    });

    $(document).ready(function fillForm(){

      var form1 = $('#resBSForm'), 
          form2 = $('#mktoForm_1867');  

      $('#BSFormBTN').click(function(){
        $(':input[name]', form2).val(function(){
          return $(':input[name='+ this.name +']', form1).val();
        });
      });

    });

    $(document).ready(function() {
      $(function fillForm () {
        $('#BSFormBTN').click(function() {
            $('#mktoForm_1536 button.mktoButton').click();
        });
      });  
    });

---

假设您的实时验证很好，HTML是表单的标准HTML，js代码中显示了什么，这只是基于您当前问题的快速实现。我相信这是可以改进的。由于您已经指出了验证中的更改，我建议您的验证在使用给定方法读取中的所有输入字段之前进行（应该在某处记录），但它应该易于实现

var form1 = $('#resBSForm'), 
    form2 = $('#mktoForm_1867');

$(document).ready(function () {
        var validator = form1.bootstrapValidator({
            fields : {
                FirstName : {
                    message : "First name is required",
                    validators : {
                        notEmpty : {
                            message : "Please provide your first name"
                        }
                    }
                },
                LastName : {
                    message : "Last name is required",
                    validators : {
                        notEmpty : {
                            message : "Please provide your last name"
                        }
                    }
                },
                Title : {
                    message : "Job title is required",
                    validators : {
                        notEmpty : {
                            message : "Please provide your job title"
                        }
                    }
                },
                Email : {
                    message : "Email address is required",
                    validators : {
                        notEmpty : {
                            message : "Please provide a valid email address"
                        },
                        emailAddress : {
                            message : "Email address was invalid"
                        }
                    }
                },
                Phone : {
                    message : "Phone number is required",
                    validators : {
                        notEmpty : {
                            message : "Please provide a valid phone number"
                        }
                    }
                },
                Company : {
                    message : "Company name is required",
                    validators : {
                        notEmpty : {
                            message : "Please provide your company name"
                        }
                    }
                },
                NumberOfEmployees : {
                    validators : {
                        notEmpty : {
                            message : "Please select your number of employees"
                        }
                    }
                },
                callDate : {
                    validators : {
                        notEmpty : {
                            message : "Please select your call date"
                        }
                    }
                },
                callTime : {
                    validators : {
                        notEmpty : {
                            message : "Please select a call time"
                        }
                    }
                },
                timeZone : {
                    validators : {
                        notEmpty : {
                            message : "Please select your time zone"
                        }
                    }
                }
            }

        });
    });

    $(document).ready(function (){
      var form1Submit = $('submitBtn', form1);

      form1Submit.click(function(){

        $('input', form2).toArray().forEach(function(e){ 
           //might want to actual validate what this returns on form submit 
           var form1Input = $("input[name='"+e.name+"']", form1).val();
           $(this).val(form1Input);
        });

        form2.submit();
      });

    });

---

假设您的实时验证很好，HTML是表单的标准HTML，js代码中显示了什么，这只是基于您当前问题的快速实现。我相信这是可以改进的。由于您已经指出了验证中的更改，我建议您的验证在使用给定方法读取中的所有输入字段之前进行（应该在某处记录），但它应该易于实现

var form1 = $('#resBSForm'), 
    form2 = $('#mktoForm_1867');

$(document).ready(function () {
        var validator = form1.bootstrapValidator({
            fields : {
                FirstName : {
                    message : "First name is required",
                    validators : {
                        notEmpty : {
                            message : "Please provide your first name"
                        }
                    }
                },
                LastName : {
                    message : "Last name is required",
                    validators : {
                        notEmpty : {
                            message : "Please provide your last name"
                        }
                    }
                },
                Title : {
                    message : "Job title is required",
                    validators : {
                        notEmpty : {
                            message : "Please provide your job title"
                        }
                    }
                },
                Email : {
                    message : "Email address is required",
                    validators : {
                        notEmpty : {
                            message : "Please provide a valid email address"
                        },
                        emailAddress : {
                            message : "Email address was invalid"
                        }
                    }
                },
                Phone : {
                    message : "Phone number is required",
                    validators : {
                        notEmpty : {
                            message : "Please provide a valid phone number"
                        }
                    }
                },
                Company : {
                    message : "Company name is required",
                    validators : {
                        notEmpty : {
                            message : "Please provide your company name"
                        }
                    }
                },
                NumberOfEmployees : {
                    validators : {
                        notEmpty : {
                            message : "Please select your number of employees"
                        }
                    }
                },
                callDate : {
                    validators : {
                        notEmpty : {
                            message : "Please select your call date"
                        }
                    }
                },
                callTime : {
                    validators : {
                        notEmpty : {
                            message : "Please select a call time"
                        }
                    }
                },
                timeZone : {
                    validators : {
                        notEmpty : {
                            message : "Please select your time zone"
                        }
                    }
                }
            }

        });
    });

    $(document).ready(function (){
      var form1Submit = $('submitBtn', form1);

      form1Submit.click(function(){

        $('input', form2).toArray().forEach(function(e){ 
           //might want to actual validate what this returns on form submit 
           var form1Input = $("input[name='"+e.name+"']", form1).val();
           $(this).val(form1Input);
        });

        form2.submit();
      });

    });

---

---

提示：在服务器端进行验证，因为您在客户端没有完全控制权。隐藏表单已经在服务器端进行验证。引导验证只是为了确保传递到隐藏表单的信息是有效的。我很好奇，为什么有两个表单？基本的结果可能是引导“提交”按钮实际上只是一个空div，然后单击，填写隐藏表单，然后就可以执行$（“hiddenform”）。submit（）在这个问题上也有点困惑：“问题是隐藏表单似乎没有像应该的那样将提交的信息输出到活动中”。它怎么能不把它“像它应该做的那样”放到活动中？它应该做什么？提示：在服务器端验证，因为你在客户端没有完全的控制权。隐藏的表单已经在服务器端验证了。引导验证只是为了确保传递到隐藏表单的信息是有效的。我很好奇，为什么有两个表单？基本的结果可能是引导“提交”按钮实际上只是一个空div，然后单击，填写隐藏表单，然后就可以执行$（“hiddenform”）。submit（）在这个问题上也有点困惑：“问题是隐藏表单似乎没有像应该的那样将提交的信息输出到活动中”。它怎么能不把它“像它应该做的那样”投入到积极的活动中呢？它应该做什么？这似乎对我不起作用。我能够在没有任何验证插件的情况下单独使用jQuery解决这个问题，但是我更希望能够添加验证规则并显示/隐藏帮助文本。这是我的@AnthonyDykstra，你想要完整的验证、用户体验和帮助文本吗？我并没有真正测试脚本，所以它更接近于虚拟代码，我已经放弃了让它工作的尝试。我的下一个努力是尝试使用jQuery删除嵌入表单的所有类/样式，并用引导类样式或我自己的样式替换它们。这是一项相对简单的任务吗？@AnthonyDykstra好吧，你可以添加一些我想可能很简单的类~这些类似乎对我不起作用。我能够在没有任何验证插件的情况下单独使用jQuery解决这个问题，但是我更希望能够添加验证规则并显示/隐藏帮助文本。这是我的@AnthonyDykstra，你想要完整的验证、用户体验和帮助文本吗？我并没有真正测试脚本，所以它更接近于虚拟代码，我已经放弃了让它工作的尝试。我的下一个努力是尝试使用jQuery删除嵌入表单的所有类/样式，并用引导类样式或我自己的样式替换它们。这是一项相对简单的任务吗？@AnthonyDykstra好吧，我想你可以简单地添加类~