带有引导程序 3 形式的 Javascript / jQuery 链排序答案

【问题标题】：Javascript / jQuery chain sequencing with bootstrap 3 form带有引导程序 3 形式的 Javascript / jQuery 链排序
【发布时间】：2015-12-30 18:05:50
【问题描述】：

好的，这就是我的情况...

我使用 Bootstrap 3 构建了一个响应式登录页面，该页面通过我们的电子邮件/登录页面营销自动化工具 Marketo 托管。该页面的目的是捕获潜在客户，所以现在我在页面上有 2 个表单，一个响应迅速且美观的引导表单，一个隐藏表单，所有信息实际上都是通过该表单提交的。

实际提交信息的隐藏表单是在 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();
        });
      });  
    });

【问题讨论】：

提示：在服务器端进行验证，因为您无法完全控制客户端。
隐藏表单已经在服务器端验证。引导验证只是为了确保传递给隐藏表单的信息是有效的。
我很好奇，为什么有两种形式？
基础知识可能最终会导致引导程序“提交”按钮实际上只是一个空的 div，然后听一下点击，填写隐藏的表单，然后你就可以执行 $("hiddenform" ).submit()
对这个问题也有点困惑：“问题是隐藏表单似乎没有像应有的那样将提交的信息输出到活动活动中”。它怎么不把它“像它应该做的那样”放到活跃的广告系列中它应该做什么？

标签： javascript jquery forms twitter-bootstrap

【解决方案1】：

假设您的实时验证没问题，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();
      });

    });

【讨论】：

这似乎对我不起作用。我能够弄清楚如何在没有任何验证插件的情况下单独使用 jQuery 来做到这一点，但是我希望能够添加验证规则并显示/隐藏帮助文本。这是我的JSFiddle
@AnthonyDykstra 所以你想要一个完整的验证、用户体验和帮助文本？我并没有真正测试脚本，所以它在足够接近的空缺中更像是伪代码
我已经放弃尝试让它工作。我的下一个尝试是尝试使用 jQuery 删除嵌入表单的所有类/样式，并将它们替换为引导类样式或我自己的样式。这是一个相对简单的任务吗？
@AnthonyDykstra 你可以添加我想可以很简单的类~