根据选项菜单中选择的内容验证选择输入字段

Question

好的，所以我有一个我需要验证的表/表单，确保提交时没有空白的输入字段。捕获是，我只需要根据表顶部的选定选项验证的某些字段。

需要： op1->名称，城市，州，电话，zip。

需要： OP2->名称，城市，州，电话，ZIP，SSN。

需要： op3->名称，城市，州，电话，zip，ssn。

需要： OP4->名称，城市，州，电话，邮政编码，dob，其他。

我想知道我是否以正确的方式进行此操作，或者也许有更好的方法来解决这个问题。

旁注：选项值是从后端动态创建的，我无法将任何ID/值添加到选项标签。

    <div class="container">
      <form action="">
        <table id="mytable1">
            <tr>
                <td>
                    <select>
                        <option>Option 1</option>
                        <option>Option 2</option>
                        <option>Option 3</option>
                        <option>Option 4</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="">Name</label>
                    <input type="text" class="name">
                </td>
            </tr>
            <tr>
                <td>
                    <label for="">City</label>
                    <input type="text" class="city">
                </td>
            </tr>
            <tr>
                <td>
                    <label for="">Phone</label>
                    <input type="text" class="phone">
                </td>
            </tr>
            <tr>
                <td>
                    <label for="">State</label>
                    <input type="text" class="state">
                </td>
            </tr>            
            <tr>
                <td>
                    <label for="">zip</label>
                    <input type="text" class="pos">
                </td>
            </tr>
            <tr>
                <td>
                    <label for="">SSN:</label>
                    <input type="text" class="add1">                
                </td>
            </tr>
            <tr>
              <td>
                  <label for="">DOB:</label>
                  <input type="text" class="add1">                
              </td>
          </tr>
          <tr>
            <td>
                <label for="">other:</label>
                <input type="text" class="add1">                
            </td>
        </tr>
        </table>
      </form>
        <button onclick="">Submit</button>
        <p>Values: </p>
    </div>

和加入JavaScript

    $(document).ready(function () {  
        $('select').on('change', function () {
            $( "p" ).append($( "input" ).map(function() {
                return $( this ).val();
            }).get().join( ", " ) );
            $('table').append($('input').map(function () {                
                console.log($(this).val()); 
            }).get().join(', ')); 

            let selValue = $('select option:selected').text();
            if(selValue == 'Option 1'){ 
                //check if required fields are blank, if so throw error
                console.log('value 1 is selected');              
            }else if(selValue == 'Option 2'){ 
                //check if required fields are blank, if so throw error
                console.log('value 2 is selected');
            } else if(selValue == 'Option 3'){ 
                //check if required fields are blank, if so throw error
                console.log('value 3 is selected');
            }else if(selValue == 'Option 4'){ 
                //check if required fields are blank, if so throw error
                console.log('value 4 is selected');                
            }else { 
                //submit form. 
                //$("form").submit(); 
            }
        });

如果还有其他需要的信息，请让我知道，我会尽快发布。

Answer 1

您需要处理的问题很少 -

1(表格标签关闭还应包括提交按钮。

2(如果您使用该按钮提交表单，则将type="submit"作为属性添加到表单中。

检查此小提琴是否验证-https：//jsfiddle.net/8o0smzth/3/

我已经评论了您代码的部分内容。请不要犹豫，问您是否还有更多问题。