Question

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

目前，我有一个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;
     }

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

    <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"){

    }

但我不相信这会起作用，我不知道如何完成它。我希望有人之前做过这件事，或者知道怎么做。

不幸的是，我被迫使用一种名为GenForm的东西（这就是为什么有些值带有d，v，r或o的原因），而且我坚持使用严格的Javascript和一些jQuery。一切都必须是客户端，也应该在移动设备上工作。

有什么建议吗？

根据下拉列表选择

0 个答案: