CODEWITHSUNDEEP
javascriptjqueryvalidation
whisk
whisk

Reputation: 655

Validate select Input fields based on what is selected in option menu

OK so I have a table/form that i need to validate, making sure that there are no blank input fields when submitted. The catch is that I only need certain fields validated based on the selected option at the top of the table.

Needed for: Op1 -> Name, city, state, phone, zip.

Needed for: Op2 -> Name, city, state, phone, zip, ssn.

Needed for: Op3 -> Name, city, state, phone, zip, ssn.

Needed for: Op4 -> Name, city, state, phone, zip, DOB, other.

I'm wondering if I am going about this the right way or maybe there is a better way to go about this.

side note: the option values are dynamically created from the back-end and I cant add any id/values to the option tags. 

    <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>

and the joining 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(); 
            }
        });

If there is any other needed info please let me know, I post it as soon as possible.

Upvotes: 0

Views: 889

Answers (1)

Tarang Dave
Tarang Dave

Reputation: 331

There were few issues that you need to take care of -

1) the form tag closing should also include the submit button.

2) If you're using that button to submit the form, then add type="submit" as an attribute to the form.

check this fiddle for the validation - https://jsfiddle.net/8o0smzth/3/

I have commented out some of part of your code. Please don't hesitate to ask if you have more questions.

Upvotes: 1

Related Questions