Javascript 基于下拉选择验证表单字段

在这种情况下，我需要能够为用户可能想要输入的“附加信息”添加动态行，但我还需要验证这些字段

目前，我有一个javascript解决方案，可以在用户单击链接时动态添加行（最多8行）。没问题。这是实现此功能的javascript：

   function myFunction() {

       var table = document.getElementById("formtable");
       var rowNum = document.getElementById("formtable").rows.length - 1;
       var addNum = 1;
       var geFrmNextNumber = (((rowNum - addNum) * 2) + addNum + 9);

       var row = table.insertRow(-1);

       var dprimaryemailaddress = "'" + "dprimaryemailaddress" + rowNum + "'";
       var vprimaryemailaddress = "'" + "vprimaryemailaddress" + rowNum + "'";
       var rprimaryemailaddress = "'" + "rprimaryemailaddress" + rowNum + "'";
       var oprimaryemailaddress = "'" + "oprimaryemailaddress" + rowNum + "'";
       var dprimary_phone_number = "'" + "dprimary_phone_number" + rowNum + "'";
       var vprimary_phone_number = "'" + "vprimary_phone_number" + rowNum + "'";
       var rprimary_phone_number = "'" + "rprimary_phone_number" + rowNum + "'";
       var oprimary_phone_number = "'" + "oprimary_phone_number" + rowNum + "'";
       var cell0 = row.insertCell(0);
           cell0.className = "input-wrapper";
       cell0.innerHTML = "<h4 class='hide-for-medium-up'></h4><input type='hidden' name="+dprimaryemailaddress+" value='Contact Type:'><select class='custom dropdown' name="+vprimaryemailaddress+" id="+vprimaryemailaddress+" required><option value='' selected>Select one</option><option value='Email address'> Email address </option><option value='Mobile number'> Mobile number </option></select><input type='hidden' name="+rprimaryemailaddress+" value='yes'><input type='hidden' name="+oprimaryemailaddress+" value="+geFrmNextNumber+"><small class='error empty'>Contact type is a required field.</small>";
           geFrmNextNumber = geFrmNextNumber + addNum;
       var cell1 = row.insertCell(1);
           cell1.className = "input-wrapper";
       cell1.innerHTML = "<h4 class='hide-for-medium-up'>Primary Phone Number: </h4><input type='hidden' name="+dprimary_phone_number+" value='Primary Phone Number:' required><input type='text' name="+vprimary_phone_number+" size='45' id='primary_phone_number' maxlength='45'><input type='hidden' name="+rprimary_phone_number+" value='yes'><input type='hidden' name="+oprimary_phone_number+" value='"+geFrmNextNumber+"'>";
               geFrmNextNumber = geFrmNextNumber + addNum;
     }

函数myFunction（）{
var table=document.getElementById（“formtable”）；
var rowNum=document.getElementById（“formtable”）.rows.length-1；
var addNum=1；
var geFrmNextNumber=（（rowNum-addNum）*2）+addNum+9）；
var行=table.insertRow（-1）；
var dprimarydemailaddress=“””+“dprimarydemailaddress”+rowNum+“”；
var vprimaryemailaddress=“””+“vprimaryemailaddress”+rowNum+“”；
var rprimarydemailaddress=“””+“rprimarydemailaddress”+rowNum+“”；
var oprimarydemailaddress=“””+“oprimarydemailaddress”+rowNum+“”；
var dprimary_phone_number=“””+“dprimary_phone_number”+rowNum+“”；
var vprimary_phone_number=“””+“vprimary_phone_number”+rowNum+“”；
var rprimary_phone_number=“””+“rprimary_phone_number”+rowNum+“”；
var oprimary_phone_number=“””+“oprimary_phone_number”+rowNum+“”；
var cell0=行插入单元格（0）；
cell0.className=“输入包装器”；
cell0.innerHTML=“选择一个电子邮件地址手机号码联系人类型是必填字段。”；
geFrmNextNumber=geFrmNextNumber+addNum；
var cell1=行插入单元格（1）；
cell1.className=“输入包装器”；
cell1.innerHTML=“主要电话号码：”；
geFrmNextNumber=geFrmNextNumber+addNum；
}

这将在浏览器中生成以下表格元素，下拉列表代码如下：

    <td class="input-wrapper">
    <h4 class="hide-for-medium-up"></h4>
    <input type="hidden" name="dprimaryemailaddress2" value="Contact Type:">
    <select class="custom dropdown" name="vprimaryemailaddress2" id="primaryemailaddress" required="">
    <option value="" selected="">Select one</option>
    <option value="Email"> Email address </option>
    <option value="SMS"> Mobile number </option>
    </select>
    <input type="hidden" name="rprimaryemailaddress2" value="no">
    <input type="hidden" name="oprimaryemailaddress2" value="12">
    <small class="error empty">Contact type is a required field.</small>
    </td>

选择一个
电子邮件地址
手机号码
联系人类型是必填字段。

对于文本字段：

    <td class="input-wrapper">
    <h4 class="hide-for-medium-up"> Primary Phone Number: </h4>
    <input type="hidden" name="dprimary_phone_number2" value="Primary Phone Number:">
    <input type="text" name="vprimary_phone_number2" size="45" id="primary_phone_number" maxlength="45">
    <input type="hidden" name="rprimary_phone_number2" value="no">
    <input type="hidden" name="oprimary_phone_number2" value="13">
    </td>

主要电话号码：

如您所见，它在每次添加行时添加选择框时，会在旁边添加一个表单字段。显示的任何选择框都是必需的，相应的文本字段也是必需的。这是最简单的部分

我一直坚持的一点是，如果用户选择电子邮件，我需要验证电子邮件地址的输入字段，如果他们选择电话，我需要验证字段是否只有数字和10位数

我摸索着做了这样的事情：

    $("#form").on("submit",function(ev) {
var Form = document.getElementById('formtable');         
for(I = 2; I < childs.length; I++) {                    
    format = document.getElementById("vprimaryemailaddress" + I).querySelector("option[selected]").value;
    if(format == "Email address"){

    }

$（“#表格”）。在（“提交”，功能（ev）{
var Form=document.getElementById（'formtable'）；
对于（I=2；I

但我不相信这会奏效，我也不确定如何完成它。我希望有人以前做过，或者知道怎么做

不幸的是，我不得不使用一种叫做GenForm的东西（这就是为什么有些值带有d、v、r或o），我只能使用严格的Javascript和一些jQuery。所有东西都必须是客户端的，并且也应该在移动设备上工作

有什么建议吗