validating all the html rows when the form is submitted












0















I am working on the html table where user can enter the details and click on submit button to submit the data to the backend.
I have 3 mandatory columns (Spring,Role,Project) which are mandatory to enter by the user before sending to the backend when clicked on submit button.
If user enters the data in first two rows and click on submit button, i want to validate if user has entered data in mandatory fields Sprint,Role and Project for each row and
if user has missed to enter data in mandatory fields then i want to show error message near that row saying "Please enter the mandatory fields". I am confused as how to show error message for each row if user has not entered data in the
madatory fields when user click on submit button after entering data in first 3 rows. Any inputs would be helpful.
I have total of 6 rows where user can enter details in all or few of them and click on submit button. Only i need to validate the rows and show error message near each row which has missing data in the mandatory fields.



Demo link : https://plnkr.co/edit/QbiuE8jOIwd2t40akBwe?p=preview



Sample html code:






<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script>



        function submitData(){

          alert("submit");

          

        }

    </script>

</head>

<body>



<table id="productTable" border="1">



    <tr>

        <th>SID</th>

        <th>Sprint <span style="color:red;">*</span></th>

        <th>Role<span style="color:red;">*</span></th>

        <th>Comments</th>

        <th>Project<span style="color:red;">*</span></th>

    </tr>



    <tr>

        <td><input type="text" name="sid" value=""></td>

        <td>

            <select class="sprint" >

                <option value=""></option>

                <option value="">121.1</option>

                <option value="">121.2</option>

                <option value="">121.3</option>

                <option value="">122.1</option>

                <option value="">122.2</option>

            </select>

        </td>

        <td>

            <input type="text" name="role" value="">

        </td>

        <td>

            <input type="text" name="Comments" value="">

        </td>

        <td>

            <select class="project" >

                <option value=""></option>

                <option value="">ProA</option>

                <option value="">ProB</option>

                <option value="">ProC</option>

                <option value="">ProD</option>

            </select>

        </td>

    </tr>

        <tr>

        <td><input type="text" name="sid" value=""></td>

        <td>

            <select class="sprint" >

                <option value=""></option>

                <option value="">121.1</option>

                <option value="">121.2</option>

                <option value="">121.3</option>

                <option value="">122.1</option>

                <option value="">122.2</option>

            </select>

        </td>

        <td>

            <input type="text" name="role" value="">

        </td>

        <td>

            <input type="text" name="Comments" value="">

        </td>

        <td>

            <select class="project" >

                <option value=""></option>

                <option value="">ProA</option>

                <option value="">ProB</option>

                <option value="">ProC</option>

                <option value="">ProD</option>

            </select>

        </td>

    </tr>

        <tr>

        <td><input type="text" name="sid" value=""></td>

        <td>

            <select class="sprint" >

                <option value=""></option>

                <option value="">121.1</option>

                <option value="">121.2</option>

                <option value="">121.3</option>

                <option value="">122.1</option>

                <option value="">122.2</option>

            </select>

        </td>

        <td>

            <input type="text" name="role" value="">

        </td>

        <td>

            <input type="text" name="Comments" value="">

        </td>

        <td>

            <select class="project" >

                <option value=""></option>

                <option value="">ProA</option>

                <option value="">ProB</option>

                <option value="">ProC</option>

                <option value="">ProD</option>

            </select>

        </td>

    </tr>

        <tr>

        <td><input type="text" name="sid" value=""></td>

        <td>

            <select class="sprint" >

                <option value=""></option>

                <option value="">121.1</option>

                <option value="">121.2</option>

                <option value="">121.3</option>

                <option value="">122.1</option>

                <option value="">122.2</option>

            </select>

        </td>

        <td>

            <input type="text" name="role" value="">

        </td>

        <td>

            <input type="text" name="Comments" value="">

        </td>

        <td>

            <select class="project" >

                <option value=""></option>

                <option value="">ProA</option>

                <option value="">ProB</option>

                <option value="">ProC</option>

                <option value="">ProD</option>

            </select>

        </td>

    </tr>

        <tr>

        <td><input type="text" name="sid" value=""></td>

        <td>

            <select class="sprint" >

                <option value=""></option>

                <option value="">121.1</option>

                <option value="">121.2</option>

                <option value="">121.3</option>

                <option value="">122.1</option>

                <option value="">122.2</option>

            </select>

        </td>

        <td>

            <input type="text" name="role" value="">

        </td>

        <td>

            <input type="text" name="Comments" value="">

        </td>

        <td>

            <select class="project" >

                <option value=""></option>

                <option value="">ProA</option>

                <option value="">ProB</option>

                <option value="">ProC</option>

                <option value="">ProD</option>

            </select>

        </td>

    </tr>

        <tr>

        <td><input type="text" name="sid" value=""></td>

        <td>

            <select class="sprint" >

                <option value=""></option>

                <option value="">121.1</option>

                <option value="">121.2</option>

                <option value="">121.3</option>

                <option value="">122.1</option>

                <option value="">122.2</option>

            </select>

        </td>

        <td>

            <input type="text" name="role" value="">

        </td>

        <td>

            <input type="text" name="Comments" value="">

        </td>

        <td>

            <select class="project" >

                <option value=""></option>

                <option value="">ProA</option>

                <option value="">ProB</option>

                <option value="">ProC</option>

                <option value="">ProD</option>

            </select>

        </td>

    </tr>       



</table> <br>

<input type="submit" value="submit" onclick="submitData()">








javascript jquery html validation







share|improve this question




















  • 1





    put your code inside a <form> and use jquery.validate

    – Alex Angelico
    Nov 20 '18 at 20:07
















0















I am working on the html table where user can enter the details and click on submit button to submit the data to the backend.
I have 3 mandatory columns (Spring,Role,Project) which are mandatory to enter by the user before sending to the backend when clicked on submit button.
If user enters the data in first two rows and click on submit button, i want to validate if user has entered data in mandatory fields Sprint,Role and Project for each row and
if user has missed to enter data in mandatory fields then i want to show error message near that row saying "Please enter the mandatory fields". I am confused as how to show error message for each row if user has not entered data in the
madatory fields when user click on submit button after entering data in first 3 rows. Any inputs would be helpful.
I have total of 6 rows where user can enter details in all or few of them and click on submit button. Only i need to validate the rows and show error message near each row which has missing data in the mandatory fields.



Demo link : https://plnkr.co/edit/QbiuE8jOIwd2t40akBwe?p=preview



Sample html code:






<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script>



        function submitData(){

          alert("submit");

          

        }

    </script>

</head>

<body>



<table id="productTable" border="1">



    <tr>

        <th>SID</th>

        <th>Sprint <span style="color:red;">*</span></th>

        <th>Role<span style="color:red;">*</span></th>

        <th>Comments</th>

        <th>Project<span style="color:red;">*</span></th>

    </tr>



    <tr>

        <td><input type="text" name="sid" value=""></td>

        <td>

            <select class="sprint" >

                <option value=""></option>

                <option value="">121.1</option>

                <option value="">121.2</option>

                <option value="">121.3</option>

                <option value="">122.1</option>

                <option value="">122.2</option>

            </select>

        </td>

        <td>

            <input type="text" name="role" value="">

        </td>

        <td>

            <input type="text" name="Comments" value="">

        </td>

        <td>

            <select class="project" >

                <option value=""></option>

                <option value="">ProA</option>

                <option value="">ProB</option>

                <option value="">ProC</option>

                <option value="">ProD</option>

            </select>

        </td>

    </tr>

        <tr>

        <td><input type="text" name="sid" value=""></td>

        <td>

            <select class="sprint" >

                <option value=""></option>

                <option value="">121.1</option>

                <option value="">121.2</option>

                <option value="">121.3</option>

                <option value="">122.1</option>

                <option value="">122.2</option>

            </select>

        </td>

        <td>

            <input type="text" name="role" value="">

        </td>

        <td>

            <input type="text" name="Comments" value="">

        </td>

        <td>

            <select class="project" >

                <option value=""></option>

                <option value="">ProA</option>

                <option value="">ProB</option>

                <option value="">ProC</option>

                <option value="">ProD</option>

            </select>

        </td>

    </tr>

        <tr>

        <td><input type="text" name="sid" value=""></td>

        <td>

            <select class="sprint" >

                <option value=""></option>

                <option value="">121.1</option>

                <option value="">121.2</option>

                <option value="">121.3</option>

                <option value="">122.1</option>

                <option value="">122.2</option>

            </select>

        </td>

        <td>

            <input type="text" name="role" value="">

        </td>

        <td>

            <input type="text" name="Comments" value="">

        </td>

        <td>

            <select class="project" >

                <option value=""></option>

                <option value="">ProA</option>

                <option value="">ProB</option>

                <option value="">ProC</option>

                <option value="">ProD</option>

            </select>

        </td>

    </tr>

        <tr>

        <td><input type="text" name="sid" value=""></td>

        <td>

            <select class="sprint" >

                <option value=""></option>

                <option value="">121.1</option>

                <option value="">121.2</option>

                <option value="">121.3</option>

                <option value="">122.1</option>

                <option value="">122.2</option>

            </select>

        </td>

        <td>

            <input type="text" name="role" value="">

        </td>

        <td>

            <input type="text" name="Comments" value="">

        </td>

        <td>

            <select class="project" >

                <option value=""></option>

                <option value="">ProA</option>

                <option value="">ProB</option>

                <option value="">ProC</option>

                <option value="">ProD</option>

            </select>

        </td>

    </tr>

        <tr>

        <td><input type="text" name="sid" value=""></td>

        <td>

            <select class="sprint" >

                <option value=""></option>

                <option value="">121.1</option>

                <option value="">121.2</option>

                <option value="">121.3</option>

                <option value="">122.1</option>

                <option value="">122.2</option>

            </select>

        </td>

        <td>

            <input type="text" name="role" value="">

        </td>

        <td>

            <input type="text" name="Comments" value="">

        </td>

        <td>

            <select class="project" >

                <option value=""></option>

                <option value="">ProA</option>

                <option value="">ProB</option>

                <option value="">ProC</option>

                <option value="">ProD</option>

            </select>

        </td>

    </tr>

        <tr>

        <td><input type="text" name="sid" value=""></td>

        <td>

            <select class="sprint" >

                <option value=""></option>

                <option value="">121.1</option>

                <option value="">121.2</option>

                <option value="">121.3</option>

                <option value="">122.1</option>

                <option value="">122.2</option>

            </select>

        </td>

        <td>

            <input type="text" name="role" value="">

        </td>

        <td>

            <input type="text" name="Comments" value="">

        </td>

        <td>

            <select class="project" >

                <option value=""></option>

                <option value="">ProA</option>

                <option value="">ProB</option>

                <option value="">ProC</option>

                <option value="">ProD</option>

            </select>

        </td>

    </tr>       



</table> <br>

<input type="submit" value="submit" onclick="submitData()">








javascript jquery html validation







share|improve this question




















  • 1





    put your code inside a <form> and use jquery.validate

    – Alex Angelico
    Nov 20 '18 at 20:07














0












0








0








I am working on the html table where user can enter the details and click on submit button to submit the data to the backend.
I have 3 mandatory columns (Spring,Role,Project) which are mandatory to enter by the user before sending to the backend when clicked on submit button.
If user enters the data in first two rows and click on submit button, i want to validate if user has entered data in mandatory fields Sprint,Role and Project for each row and
if user has missed to enter data in mandatory fields then i want to show error message near that row saying "Please enter the mandatory fields". I am confused as how to show error message for each row if user has not entered data in the
madatory fields when user click on submit button after entering data in first 3 rows. Any inputs would be helpful.
I have total of 6 rows where user can enter details in all or few of them and click on submit button. Only i need to validate the rows and show error message near each row which has missing data in the mandatory fields.



Demo link : https://plnkr.co/edit/QbiuE8jOIwd2t40akBwe?p=preview



Sample html code:






<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script>



        function submitData(){

          alert("submit");

          

        }

    </script>

</head>

<body>



<table id="productTable" border="1">



    <tr>

        <th>SID</th>

        <th>Sprint <span style="color:red;">*</span></th>

        <th>Role<span style="color:red;">*</span></th>

        <th>Comments</th>

        <th>Project<span style="color:red;">*</span></th>

    </tr>



    <tr>

        <td><input type="text" name="sid" value=""></td>

        <td>

            <select class="sprint" >

                <option value=""></option>

                <option value="">121.1</option>

                <option value="">121.2</option>

                <option value="">121.3</option>

                <option value="">122.1</option>

                <option value="">122.2</option>

            </select>

        </td>

        <td>

            <input type="text" name="role" value="">

        </td>

        <td>

            <input type="text" name="Comments" value="">

        </td>

        <td>

            <select class="project" >

                <option value=""></option>

                <option value="">ProA</option>

                <option value="">ProB</option>

                <option value="">ProC</option>

                <option value="">ProD</option>

            </select>

        </td>

    </tr>

        <tr>

        <td><input type="text" name="sid" value=""></td>

        <td>

            <select class="sprint" >

                <option value=""></option>

                <option value="">121.1</option>

                <option value="">121.2</option>

                <option value="">121.3</option>

                <option value="">122.1</option>

                <option value="">122.2</option>

            </select>

        </td>

        <td>

            <input type="text" name="role" value="">

        </td>

        <td>

            <input type="text" name="Comments" value="">

        </td>

        <td>

            <select class="project" >

                <option value=""></option>

                <option value="">ProA</option>

                <option value="">ProB</option>

                <option value="">ProC</option>

                <option value="">ProD</option>

            </select>

        </td>

    </tr>

        <tr>

        <td><input type="text" name="sid" value=""></td>

        <td>

            <select class="sprint" >

                <option value=""></option>

                <option value="">121.1</option>

                <option value="">121.2</option>

                <option value="">121.3</option>

                <option value="">122.1</option>

                <option value="">122.2</option>

            </select>

        </td>

        <td>

            <input type="text" name="role" value="">

        </td>

        <td>

            <input type="text" name="Comments" value="">

        </td>

        <td>

            <select class="project" >

                <option value=""></option>

                <option value="">ProA</option>

                <option value="">ProB</option>

                <option value="">ProC</option>

                <option value="">ProD</option>

            </select>

        </td>

    </tr>

        <tr>

        <td><input type="text" name="sid" value=""></td>

        <td>

            <select class="sprint" >

                <option value=""></option>

                <option value="">121.1</option>

                <option value="">121.2</option>

                <option value="">121.3</option>

                <option value="">122.1</option>

                <option value="">122.2</option>

            </select>

        </td>

        <td>

            <input type="text" name="role" value="">

        </td>

        <td>

            <input type="text" name="Comments" value="">

        </td>

        <td>

            <select class="project" >

                <option value=""></option>

                <option value="">ProA</option>

                <option value="">ProB</option>

                <option value="">ProC</option>

                <option value="">ProD</option>

            </select>

        </td>

    </tr>

        <tr>

        <td><input type="text" name="sid" value=""></td>

        <td>

            <select class="sprint" >

                <option value=""></option>

                <option value="">121.1</option>

                <option value="">121.2</option>

                <option value="">121.3</option>

                <option value="">122.1</option>

                <option value="">122.2</option>

            </select>

        </td>

        <td>

            <input type="text" name="role" value="">

        </td>

        <td>

            <input type="text" name="Comments" value="">

        </td>

        <td>

            <select class="project" >

                <option value=""></option>

                <option value="">ProA</option>

                <option value="">ProB</option>

                <option value="">ProC</option>

                <option value="">ProD</option>

            </select>

        </td>

    </tr>

        <tr>

        <td><input type="text" name="sid" value=""></td>

        <td>

            <select class="sprint" >

                <option value=""></option>

                <option value="">121.1</option>

                <option value="">121.2</option>

                <option value="">121.3</option>

                <option value="">122.1</option>

                <option value="">122.2</option>

            </select>

        </td>

        <td>

            <input type="text" name="role" value="">

        </td>

        <td>

            <input type="text" name="Comments" value="">

        </td>

        <td>

            <select class="project" >

                <option value=""></option>

                <option value="">ProA</option>

                <option value="">ProB</option>

                <option value="">ProC</option>

                <option value="">ProD</option>

            </select>

        </td>

    </tr>       



</table> <br>

<input type="submit" value="submit" onclick="submitData()">








javascript jquery html validation







share|improve this question
















I am working on the html table where user can enter the details and click on submit button to submit the data to the backend.
I have 3 mandatory columns (Spring,Role,Project) which are mandatory to enter by the user before sending to the backend when clicked on submit button.
If user enters the data in first two rows and click on submit button, i want to validate if user has entered data in mandatory fields Sprint,Role and Project for each row and
if user has missed to enter data in mandatory fields then i want to show error message near that row saying "Please enter the mandatory fields". I am confused as how to show error message for each row if user has not entered data in the
madatory fields when user click on submit button after entering data in first 3 rows. Any inputs would be helpful.
I have total of 6 rows where user can enter details in all or few of them and click on submit button. Only i need to validate the rows and show error message near each row which has missing data in the mandatory fields.



Demo link : https://plnkr.co/edit/QbiuE8jOIwd2t40akBwe?p=preview



Sample html code:






<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script>



        function submitData(){

          alert("submit");

          

        }

    </script>

</head>

<body>



<table id="productTable" border="1">



    <tr>

        <th>SID</th>

        <th>Sprint <span style="color:red;">*</span></th>

        <th>Role<span style="color:red;">*</span></th>

        <th>Comments</th>

        <th>Project<span style="color:red;">*</span></th>

    </tr>



    <tr>

        <td><input type="text" name="sid" value=""></td>

        <td>

            <select class="sprint" >

                <option value=""></option>

                <option value="">121.1</option>

                <option value="">121.2</option>

                <option value="">121.3</option>

                <option value="">122.1</option>

                <option value="">122.2</option>

            </select>

        </td>

        <td>

            <input type="text" name="role" value="">

        </td>

        <td>

            <input type="text" name="Comments" value="">

        </td>

        <td>

            <select class="project" >

                <option value=""></option>

                <option value="">ProA</option>

                <option value="">ProB</option>

                <option value="">ProC</option>

                <option value="">ProD</option>

            </select>

        </td>

    </tr>

        <tr>

        <td><input type="text" name="sid" value=""></td>

        <td>

            <select class="sprint" >

                <option value=""></option>

                <option value="">121.1</option>

                <option value="">121.2</option>

                <option value="">121.3</option>

                <option value="">122.1</option>

                <option value="">122.2</option>

            </select>

        </td>

        <td>

            <input type="text" name="role" value="">

        </td>

        <td>

            <input type="text" name="Comments" value="">

        </td>

        <td>

            <select class="project" >

                <option value=""></option>

                <option value="">ProA</option>

                <option value="">ProB</option>

                <option value="">ProC</option>

                <option value="">ProD</option>

            </select>

        </td>

    </tr>

        <tr>

        <td><input type="text" name="sid" value=""></td>

        <td>

            <select class="sprint" >

                <option value=""></option>

                <option value="">121.1</option>

                <option value="">121.2</option>

                <option value="">121.3</option>

                <option value="">122.1</option>

                <option value="">122.2</option>

            </select>

        </td>

        <td>

            <input type="text" name="role" value="">

        </td>

        <td>

            <input type="text" name="Comments" value="">

        </td>

        <td>

            <select class="project" >

                <option value=""></option>

                <option value="">ProA</option>

                <option value="">ProB</option>

                <option value="">ProC</option>

                <option value="">ProD</option>

            </select>

        </td>

    </tr>

        <tr>

        <td><input type="text" name="sid" value=""></td>

        <td>

            <select class="sprint" >

                <option value=""></option>

                <option value="">121.1</option>

                <option value="">121.2</option>

                <option value="">121.3</option>

                <option value="">122.1</option>

                <option value="">122.2</option>

            </select>

        </td>

        <td>

            <input type="text" name="role" value="">

        </td>

        <td>

            <input type="text" name="Comments" value="">

        </td>

        <td>

            <select class="project" >

                <option value=""></option>

                <option value="">ProA</option>

                <option value="">ProB</option>

                <option value="">ProC</option>

                <option value="">ProD</option>

            </select>

        </td>

    </tr>

        <tr>

        <td><input type="text" name="sid" value=""></td>

        <td>

            <select class="sprint" >

                <option value=""></option>

                <option value="">121.1</option>

                <option value="">121.2</option>

                <option value="">121.3</option>

                <option value="">122.1</option>

                <option value="">122.2</option>

            </select>

        </td>

        <td>

            <input type="text" name="role" value="">

        </td>

        <td>

            <input type="text" name="Comments" value="">

        </td>

        <td>

            <select class="project" >

                <option value=""></option>

                <option value="">ProA</option>

                <option value="">ProB</option>

                <option value="">ProC</option>

                <option value="">ProD</option>

            </select>

        </td>

    </tr>

        <tr>

        <td><input type="text" name="sid" value=""></td>

        <td>

            <select class="sprint" >

                <option value=""></option>

                <option value="">121.1</option>

                <option value="">121.2</option>

                <option value="">121.3</option>

                <option value="">122.1</option>

                <option value="">122.2</option>

            </select>

        </td>

        <td>

            <input type="text" name="role" value="">

        </td>

        <td>

            <input type="text" name="Comments" value="">

        </td>

        <td>

            <select class="project" >

                <option value=""></option>

                <option value="">ProA</option>

                <option value="">ProB</option>

                <option value="">ProC</option>

                <option value="">ProD</option>

            </select>

        </td>

    </tr>       



</table> <br>

<input type="submit" value="submit" onclick="submitData()">

 








<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script>



        function submitData(){

          alert("submit");

          

        }

    </script>

</head>

<body>



<table id="productTable" border="1">



    <tr>

        <th>SID</th>

        <th>Sprint <span style="color:red;">*</span></th>

        <th>Role<span style="color:red;">*</span></th>

        <th>Comments</th>

        <th>Project<span style="color:red;">*</span></th>

    </tr>



    <tr>

        <td><input type="text" name="sid" value=""></td>

        <td>

            <select class="sprint" >

                <option value=""></option>

                <option value="">121.1</option>

                <option value="">121.2</option>

                <option value="">121.3</option>

                <option value="">122.1</option>

                <option value="">122.2</option>

            </select>

        </td>

        <td>

            <input type="text" name="role" value="">

        </td>

        <td>

            <input type="text" name="Comments" value="">

        </td>

        <td>

            <select class="project" >

                <option value=""></option>

                <option value="">ProA</option>

                <option value="">ProB</option>

                <option value="">ProC</option>

                <option value="">ProD</option>

            </select>

        </td>

    </tr>

        <tr>

        <td><input type="text" name="sid" value=""></td>

        <td>

            <select class="sprint" >

                <option value=""></option>

                <option value="">121.1</option>

                <option value="">121.2</option>

                <option value="">121.3</option>

                <option value="">122.1</option>

                <option value="">122.2</option>

            </select>

        </td>

        <td>

            <input type="text" name="role" value="">

        </td>

        <td>

            <input type="text" name="Comments" value="">

        </td>

        <td>

            <select class="project" >

                <option value=""></option>

                <option value="">ProA</option>

                <option value="">ProB</option>

                <option value="">ProC</option>

                <option value="">ProD</option>

            </select>

        </td>

    </tr>

        <tr>

        <td><input type="text" name="sid" value=""></td>

        <td>

            <select class="sprint" >

                <option value=""></option>

                <option value="">121.1</option>

                <option value="">121.2</option>

                <option value="">121.3</option>

                <option value="">122.1</option>

                <option value="">122.2</option>

            </select>

        </td>

        <td>

            <input type="text" name="role" value="">

        </td>

        <td>

            <input type="text" name="Comments" value="">

        </td>

        <td>

            <select class="project" >

                <option value=""></option>

                <option value="">ProA</option>

                <option value="">ProB</option>

                <option value="">ProC</option>

                <option value="">ProD</option>

            </select>

        </td>

    </tr>

        <tr>

        <td><input type="text" name="sid" value=""></td>

        <td>

            <select class="sprint" >

                <option value=""></option>

                <option value="">121.1</option>

                <option value="">121.2</option>

                <option value="">121.3</option>

                <option value="">122.1</option>

                <option value="">122.2</option>

            </select>

        </td>

        <td>

            <input type="text" name="role" value="">

        </td>

        <td>

            <input type="text" name="Comments" value="">

        </td>

        <td>

            <select class="project" >

                <option value=""></option>

                <option value="">ProA</option>

                <option value="">ProB</option>

                <option value="">ProC</option>

                <option value="">ProD</option>

            </select>

        </td>

    </tr>

        <tr>

        <td><input type="text" name="sid" value=""></td>

        <td>

            <select class="sprint" >

                <option value=""></option>

                <option value="">121.1</option>

                <option value="">121.2</option>

                <option value="">121.3</option>

                <option value="">122.1</option>

                <option value="">122.2</option>

            </select>

        </td>

        <td>

            <input type="text" name="role" value="">

        </td>

        <td>

            <input type="text" name="Comments" value="">

        </td>

        <td>

            <select class="project" >

                <option value=""></option>

                <option value="">ProA</option>

                <option value="">ProB</option>

                <option value="">ProC</option>

                <option value="">ProD</option>

            </select>

        </td>

    </tr>

        <tr>

        <td><input type="text" name="sid" value=""></td>

        <td>

            <select class="sprint" >

                <option value=""></option>

                <option value="">121.1</option>

                <option value="">121.2</option>

                <option value="">121.3</option>

                <option value="">122.1</option>

                <option value="">122.2</option>

            </select>

        </td>

        <td>

            <input type="text" name="role" value="">

        </td>

        <td>

            <input type="text" name="Comments" value="">

        </td>

        <td>

            <select class="project" >

                <option value=""></option>

                <option value="">ProA</option>

                <option value="">ProB</option>

                <option value="">ProC</option>

                <option value="">ProD</option>

            </select>

        </td>

    </tr>       



</table> <br>

<input type="submit" value="submit" onclick="submitData()">

 





<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script>



        function submitData(){

          alert("submit");

          

        }

    </script>

</head>

<body>



<table id="productTable" border="1">



    <tr>

        <th>SID</th>

        <th>Sprint <span style="color:red;">*</span></th>

        <th>Role<span style="color:red;">*</span></th>

        <th>Comments</th>

        <th>Project<span style="color:red;">*</span></th>

    </tr>



    <tr>

        <td><input type="text" name="sid" value=""></td>

        <td>

            <select class="sprint" >

                <option value=""></option>

                <option value="">121.1</option>

                <option value="">121.2</option>

                <option value="">121.3</option>

                <option value="">122.1</option>

                <option value="">122.2</option>

            </select>

        </td>

        <td>

            <input type="text" name="role" value="">

        </td>

        <td>

            <input type="text" name="Comments" value="">

        </td>

        <td>

            <select class="project" >

                <option value=""></option>

                <option value="">ProA</option>

                <option value="">ProB</option>

                <option value="">ProC</option>

                <option value="">ProD</option>

            </select>

        </td>

    </tr>

        <tr>

        <td><input type="text" name="sid" value=""></td>

        <td>

            <select class="sprint" >

                <option value=""></option>

                <option value="">121.1</option>

                <option value="">121.2</option>

                <option value="">121.3</option>

                <option value="">122.1</option>

                <option value="">122.2</option>

            </select>

        </td>

        <td>

            <input type="text" name="role" value="">

        </td>

        <td>

            <input type="text" name="Comments" value="">

        </td>

        <td>

            <select class="project" >

                <option value=""></option>

                <option value="">ProA</option>

                <option value="">ProB</option>

                <option value="">ProC</option>

                <option value="">ProD</option>

            </select>

        </td>

    </tr>

        <tr>

        <td><input type="text" name="sid" value=""></td>

        <td>

            <select class="sprint" >

                <option value=""></option>

                <option value="">121.1</option>

                <option value="">121.2</option>

                <option value="">121.3</option>

                <option value="">122.1</option>

                <option value="">122.2</option>

            </select>

        </td>

        <td>

            <input type="text" name="role" value="">

        </td>

        <td>

            <input type="text" name="Comments" value="">

        </td>

        <td>

            <select class="project" >

                <option value=""></option>

                <option value="">ProA</option>

                <option value="">ProB</option>

                <option value="">ProC</option>

                <option value="">ProD</option>

            </select>

        </td>

    </tr>

        <tr>

        <td><input type="text" name="sid" value=""></td>

        <td>

            <select class="sprint" >

                <option value=""></option>

                <option value="">121.1</option>

                <option value="">121.2</option>

                <option value="">121.3</option>

                <option value="">122.1</option>

                <option value="">122.2</option>

            </select>

        </td>

        <td>

            <input type="text" name="role" value="">

        </td>

        <td>

            <input type="text" name="Comments" value="">

        </td>

        <td>

            <select class="project" >

                <option value=""></option>

                <option value="">ProA</option>

                <option value="">ProB</option>

                <option value="">ProC</option>

                <option value="">ProD</option>

            </select>

        </td>

    </tr>

        <tr>

        <td><input type="text" name="sid" value=""></td>

        <td>

            <select class="sprint" >

                <option value=""></option>

                <option value="">121.1</option>

                <option value="">121.2</option>

                <option value="">121.3</option>

                <option value="">122.1</option>

                <option value="">122.2</option>

            </select>

        </td>

        <td>

            <input type="text" name="role" value="">

        </td>

        <td>

            <input type="text" name="Comments" value="">

        </td>

        <td>

            <select class="project" >

                <option value=""></option>

                <option value="">ProA</option>

                <option value="">ProB</option>

                <option value="">ProC</option>

                <option value="">ProD</option>

            </select>

        </td>

    </tr>

        <tr>

        <td><input type="text" name="sid" value=""></td>

        <td>

            <select class="sprint" >

                <option value=""></option>

                <option value="">121.1</option>

                <option value="">121.2</option>

                <option value="">121.3</option>

                <option value="">122.1</option>

                <option value="">122.2</option>

            </select>

        </td>

        <td>

            <input type="text" name="role" value="">

        </td>

        <td>

            <input type="text" name="Comments" value="">

        </td>

        <td>

            <select class="project" >

                <option value=""></option>

                <option value="">ProA</option>

                <option value="">ProB</option>

                <option value="">ProC</option>

                <option value="">ProD</option>

            </select>

        </td>

    </tr>       



</table> <br>

<input type="submit" value="submit" onclick="submitData()">





javascript jquery html validation




javascript jquery html validation






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 20 '18 at 20:00







dexter

















asked Nov 20 '18 at 18:32









dexterdexter

629




629








  • 1





    put your code inside a <form> and use jquery.validate

    – Alex Angelico
    Nov 20 '18 at 20:07














  • 1





    put your code inside a <form> and use jquery.validate

    – Alex Angelico
    Nov 20 '18 at 20:07








1




1





put your code inside a <form> and use jquery.validate

– Alex Angelico
Nov 20 '18 at 20:07





put your code inside a <form> and use jquery.validate

– Alex Angelico
Nov 20 '18 at 20:07












1 Answer
1






active

oldest

votes


















1














check if all data entered or not then the rest data is entered partially



if (sprint && role && project) {.....}

else if (!sprint && !role && !project) {} // do nothing

else {....}


Demo:






function submitData() {

  var dataPassed = false,

    dataCount = 0,

    hasEnteredData = false;

  $('#productTable tr:not(:first)').each(function(index) {



    var sprint = $(this).find('.sprint :selected').text(),

      role = $(this).find('input[name="role"]').val(),

      project = $(this).find('.project :selected').text();

    if (sprint && role && project) {

      dataPassed = true

      dataCount++;

    }

    else if (!sprint && !role && !project) {

      // all empty, skip

    }

    else {

      alert('Required data missing in row: ' +

        (index + 1) + 'nfill: Sprint, Role, Project')

      dataPassed = false;

      hasEnteredData = true;

      return false;

    }

  })



  if (dataPassed) {

    alert('Success, Data count: ' +

      dataCount + ' rows, submit?');

    // do submit

  }

  else if (!hasEnteredData) {

    alert('No data entered')

  }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>



<table id="productTable" border="1">



    <tr>

      <th>SID</th>

      <th>Sprint <span style="color:red;">*</span></th>

      <th>Role<span style="color:red;">*</span></th>

      <th>Comments</th>

      <th>Project<span style="color:red;">*</span></th>

    </tr>



    <tr>

      <td>

        <input type="text" name="sid" value="">

      </td>

      <td>

        <select class="sprint">

          <option value=""></option>

          <option value="">121.1</option>

          <option value="">121.2</option>

          <option value="">121.3</option>

          <option value="">122.1</option>

          <option value="">122.2</option>

        </select>

      </td>

      <td>

        <input type="text" name="role" value="">

      </td>

      <td>

        <input type="text" name="Comments" value="">

      </td>

      <td>

        <select class="project">

          <option value=""></option>

          <option value="">ProA</option>

          <option value="">ProB</option>

          <option value="">ProC</option>

          <option value="">ProD</option>

        </select>

      </td>

    </tr>

    <tr>

      <td>

        <input type="text" name="sid" value="">

      </td>

      <td>

        <select class="sprint">

          <option value=""></option>

          <option value="">121.1</option>

          <option value="">121.2</option>

          <option value="">121.3</option>

          <option value="">122.1</option>

          <option value="">122.2</option>

        </select>

      </td>

      <td>

        <input type="text" name="role" value="">

      </td>

      <td>

        <input type="text" name="Comments" value="">

      </td>

      <td>

        <select class="project">

          <option value=""></option>

          <option value="">ProA</option>

          <option value="">ProB</option>

          <option value="">ProC</option>

          <option value="">ProD</option>

        </select>

      </td>

    </tr>

    <tr>

      <td>

        <input type="text" name="sid" value="">

      </td>

      <td>

        <select class="sprint">

          <option value=""></option>

          <option value="">121.1</option>

          <option value="">121.2</option>

          <option value="">121.3</option>

          <option value="">122.1</option>

          <option value="">122.2</option>

        </select>

      </td>

      <td>

        <input type="text" name="role" value="">

      </td>

      <td>

        <input type="text" name="Comments" value="">

      </td>

      <td>

        <select class="project">

          <option value=""></option>

          <option value="">ProA</option>

          <option value="">ProB</option>

          <option value="">ProC</option>

          <option value="">ProD</option>

        </select>

      </td>

    </tr>

  </table>

  <br>

  <input type="submit" value="submit" onclick="submitData()">








share|improve this answer
























  • Thanks for the inputs. Instead of showing an alert message I want to display an error message near each row of the missing required fields on the right hand side of the table with red color font. Is it possible?

    – dexter
    Nov 20 '18 at 20:57











  • it just example. it possible but need more work, try find js form library.

    – ewwink
    Nov 20 '18 at 21:01











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53399359%2fvalidating-all-the-html-rows-when-the-form-is-submitted%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes









1














check if all data entered or not then the rest data is entered partially



if (sprint && role && project) {.....}

else if (!sprint && !role && !project) {} // do nothing

else {....}


Demo:






function submitData() {

  var dataPassed = false,

    dataCount = 0,

    hasEnteredData = false;

  $('#productTable tr:not(:first)').each(function(index) {



    var sprint = $(this).find('.sprint :selected').text(),

      role = $(this).find('input[name="role"]').val(),

      project = $(this).find('.project :selected').text();

    if (sprint && role && project) {

      dataPassed = true

      dataCount++;

    }

    else if (!sprint && !role && !project) {

      // all empty, skip

    }

    else {

      alert('Required data missing in row: ' +

        (index + 1) + 'nfill: Sprint, Role, Project')

      dataPassed = false;

      hasEnteredData = true;

      return false;

    }

  })



  if (dataPassed) {

    alert('Success, Data count: ' +

      dataCount + ' rows, submit?');

    // do submit

  }

  else if (!hasEnteredData) {

    alert('No data entered')

  }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>



<table id="productTable" border="1">



    <tr>

      <th>SID</th>

      <th>Sprint <span style="color:red;">*</span></th>

      <th>Role<span style="color:red;">*</span></th>

      <th>Comments</th>

      <th>Project<span style="color:red;">*</span></th>

    </tr>



    <tr>

      <td>

        <input type="text" name="sid" value="">

      </td>

      <td>

        <select class="sprint">

          <option value=""></option>

          <option value="">121.1</option>

          <option value="">121.2</option>

          <option value="">121.3</option>

          <option value="">122.1</option>

          <option value="">122.2</option>

        </select>

      </td>

      <td>

        <input type="text" name="role" value="">

      </td>

      <td>

        <input type="text" name="Comments" value="">

      </td>

      <td>

        <select class="project">

          <option value=""></option>

          <option value="">ProA</option>

          <option value="">ProB</option>

          <option value="">ProC</option>

          <option value="">ProD</option>

        </select>

      </td>

    </tr>

    <tr>

      <td>

        <input type="text" name="sid" value="">

      </td>

      <td>

        <select class="sprint">

          <option value=""></option>

          <option value="">121.1</option>

          <option value="">121.2</option>

          <option value="">121.3</option>

          <option value="">122.1</option>

          <option value="">122.2</option>

        </select>

      </td>

      <td>

        <input type="text" name="role" value="">

      </td>

      <td>

        <input type="text" name="Comments" value="">

      </td>

      <td>

        <select class="project">

          <option value=""></option>

          <option value="">ProA</option>

          <option value="">ProB</option>

          <option value="">ProC</option>

          <option value="">ProD</option>

        </select>

      </td>

    </tr>

    <tr>

      <td>

        <input type="text" name="sid" value="">

      </td>

      <td>

        <select class="sprint">

          <option value=""></option>

          <option value="">121.1</option>

          <option value="">121.2</option>

          <option value="">121.3</option>

          <option value="">122.1</option>

          <option value="">122.2</option>

        </select>

      </td>

      <td>

        <input type="text" name="role" value="">

      </td>

      <td>

        <input type="text" name="Comments" value="">

      </td>

      <td>

        <select class="project">

          <option value=""></option>

          <option value="">ProA</option>

          <option value="">ProB</option>

          <option value="">ProC</option>

          <option value="">ProD</option>

        </select>

      </td>

    </tr>

  </table>

  <br>

  <input type="submit" value="submit" onclick="submitData()">








share|improve this answer
























  • Thanks for the inputs. Instead of showing an alert message I want to display an error message near each row of the missing required fields on the right hand side of the table with red color font. Is it possible?

    – dexter
    Nov 20 '18 at 20:57











  • it just example. it possible but need more work, try find js form library.

    – ewwink
    Nov 20 '18 at 21:01
















1














check if all data entered or not then the rest data is entered partially



if (sprint && role && project) {.....}

else if (!sprint && !role && !project) {} // do nothing

else {....}


Demo:






function submitData() {

  var dataPassed = false,

    dataCount = 0,

    hasEnteredData = false;

  $('#productTable tr:not(:first)').each(function(index) {



    var sprint = $(this).find('.sprint :selected').text(),

      role = $(this).find('input[name="role"]').val(),

      project = $(this).find('.project :selected').text();

    if (sprint && role && project) {

      dataPassed = true

      dataCount++;

    }

    else if (!sprint && !role && !project) {

      // all empty, skip

    }

    else {

      alert('Required data missing in row: ' +

        (index + 1) + 'nfill: Sprint, Role, Project')

      dataPassed = false;

      hasEnteredData = true;

      return false;

    }

  })



  if (dataPassed) {

    alert('Success, Data count: ' +

      dataCount + ' rows, submit?');

    // do submit

  }

  else if (!hasEnteredData) {

    alert('No data entered')

  }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>



<table id="productTable" border="1">



    <tr>

      <th>SID</th>

      <th>Sprint <span style="color:red;">*</span></th>

      <th>Role<span style="color:red;">*</span></th>

      <th>Comments</th>

      <th>Project<span style="color:red;">*</span></th>

    </tr>



    <tr>

      <td>

        <input type="text" name="sid" value="">

      </td>

      <td>

        <select class="sprint">

          <option value=""></option>

          <option value="">121.1</option>

          <option value="">121.2</option>

          <option value="">121.3</option>

          <option value="">122.1</option>

          <option value="">122.2</option>

        </select>

      </td>

      <td>

        <input type="text" name="role" value="">

      </td>

      <td>

        <input type="text" name="Comments" value="">

      </td>

      <td>

        <select class="project">

          <option value=""></option>

          <option value="">ProA</option>

          <option value="">ProB</option>

          <option value="">ProC</option>

          <option value="">ProD</option>

        </select>

      </td>

    </tr>

    <tr>

      <td>

        <input type="text" name="sid" value="">

      </td>

      <td>

        <select class="sprint">

          <option value=""></option>

          <option value="">121.1</option>

          <option value="">121.2</option>

          <option value="">121.3</option>

          <option value="">122.1</option>

          <option value="">122.2</option>

        </select>

      </td>

      <td>

        <input type="text" name="role" value="">

      </td>

      <td>

        <input type="text" name="Comments" value="">

      </td>

      <td>

        <select class="project">

          <option value=""></option>

          <option value="">ProA</option>

          <option value="">ProB</option>

          <option value="">ProC</option>

          <option value="">ProD</option>

        </select>

      </td>

    </tr>

    <tr>

      <td>

        <input type="text" name="sid" value="">

      </td>

      <td>

        <select class="sprint">

          <option value=""></option>

          <option value="">121.1</option>

          <option value="">121.2</option>

          <option value="">121.3</option>

          <option value="">122.1</option>

          <option value="">122.2</option>

        </select>

      </td>

      <td>

        <input type="text" name="role" value="">

      </td>

      <td>

        <input type="text" name="Comments" value="">

      </td>

      <td>

        <select class="project">

          <option value=""></option>

          <option value="">ProA</option>

          <option value="">ProB</option>

          <option value="">ProC</option>

          <option value="">ProD</option>

        </select>

      </td>

    </tr>

  </table>

  <br>

  <input type="submit" value="submit" onclick="submitData()">








share|improve this answer
























  • Thanks for the inputs. Instead of showing an alert message I want to display an error message near each row of the missing required fields on the right hand side of the table with red color font. Is it possible?

    – dexter
    Nov 20 '18 at 20:57











  • it just example. it possible but need more work, try find js form library.

    – ewwink
    Nov 20 '18 at 21:01














1












1








1







check if all data entered or not then the rest data is entered partially



if (sprint && role && project) {.....}

else if (!sprint && !role && !project) {} // do nothing

else {....}


Demo:






function submitData() {

  var dataPassed = false,

    dataCount = 0,

    hasEnteredData = false;

  $('#productTable tr:not(:first)').each(function(index) {



    var sprint = $(this).find('.sprint :selected').text(),

      role = $(this).find('input[name="role"]').val(),

      project = $(this).find('.project :selected').text();

    if (sprint && role && project) {

      dataPassed = true

      dataCount++;

    }

    else if (!sprint && !role && !project) {

      // all empty, skip

    }

    else {

      alert('Required data missing in row: ' +

        (index + 1) + 'nfill: Sprint, Role, Project')

      dataPassed = false;

      hasEnteredData = true;

      return false;

    }

  })



  if (dataPassed) {

    alert('Success, Data count: ' +

      dataCount + ' rows, submit?');

    // do submit

  }

  else if (!hasEnteredData) {

    alert('No data entered')

  }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>



<table id="productTable" border="1">



    <tr>

      <th>SID</th>

      <th>Sprint <span style="color:red;">*</span></th>

      <th>Role<span style="color:red;">*</span></th>

      <th>Comments</th>

      <th>Project<span style="color:red;">*</span></th>

    </tr>



    <tr>

      <td>

        <input type="text" name="sid" value="">

      </td>

      <td>

        <select class="sprint">

          <option value=""></option>

          <option value="">121.1</option>

          <option value="">121.2</option>

          <option value="">121.3</option>

          <option value="">122.1</option>

          <option value="">122.2</option>

        </select>

      </td>

      <td>

        <input type="text" name="role" value="">

      </td>

      <td>

        <input type="text" name="Comments" value="">

      </td>

      <td>

        <select class="project">

          <option value=""></option>

          <option value="">ProA</option>

          <option value="">ProB</option>

          <option value="">ProC</option>

          <option value="">ProD</option>

        </select>

      </td>

    </tr>

    <tr>

      <td>

        <input type="text" name="sid" value="">

      </td>

      <td>

        <select class="sprint">

          <option value=""></option>

          <option value="">121.1</option>

          <option value="">121.2</option>

          <option value="">121.3</option>

          <option value="">122.1</option>

          <option value="">122.2</option>

        </select>

      </td>

      <td>

        <input type="text" name="role" value="">

      </td>

      <td>

        <input type="text" name="Comments" value="">

      </td>

      <td>

        <select class="project">

          <option value=""></option>

          <option value="">ProA</option>

          <option value="">ProB</option>

          <option value="">ProC</option>

          <option value="">ProD</option>

        </select>

      </td>

    </tr>

    <tr>

      <td>

        <input type="text" name="sid" value="">

      </td>

      <td>

        <select class="sprint">

          <option value=""></option>

          <option value="">121.1</option>

          <option value="">121.2</option>

          <option value="">121.3</option>

          <option value="">122.1</option>

          <option value="">122.2</option>

        </select>

      </td>

      <td>

        <input type="text" name="role" value="">

      </td>

      <td>

        <input type="text" name="Comments" value="">

      </td>

      <td>

        <select class="project">

          <option value=""></option>

          <option value="">ProA</option>

          <option value="">ProB</option>

          <option value="">ProC</option>

          <option value="">ProD</option>

        </select>

      </td>

    </tr>

  </table>

  <br>

  <input type="submit" value="submit" onclick="submitData()">








share|improve this answer













check if all data entered or not then the rest data is entered partially



if (sprint && role && project) {.....}

else if (!sprint && !role && !project) {} // do nothing

else {....}


Demo:






function submitData() {

  var dataPassed = false,

    dataCount = 0,

    hasEnteredData = false;

  $('#productTable tr:not(:first)').each(function(index) {



    var sprint = $(this).find('.sprint :selected').text(),

      role = $(this).find('input[name="role"]').val(),

      project = $(this).find('.project :selected').text();

    if (sprint && role && project) {

      dataPassed = true

      dataCount++;

    }

    else if (!sprint && !role && !project) {

      // all empty, skip

    }

    else {

      alert('Required data missing in row: ' +

        (index + 1) + 'nfill: Sprint, Role, Project')

      dataPassed = false;

      hasEnteredData = true;

      return false;

    }

  })



  if (dataPassed) {

    alert('Success, Data count: ' +

      dataCount + ' rows, submit?');

    // do submit

  }

  else if (!hasEnteredData) {

    alert('No data entered')

  }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>



<table id="productTable" border="1">



    <tr>

      <th>SID</th>

      <th>Sprint <span style="color:red;">*</span></th>

      <th>Role<span style="color:red;">*</span></th>

      <th>Comments</th>

      <th>Project<span style="color:red;">*</span></th>

    </tr>



    <tr>

      <td>

        <input type="text" name="sid" value="">

      </td>

      <td>

        <select class="sprint">

          <option value=""></option>

          <option value="">121.1</option>

          <option value="">121.2</option>

          <option value="">121.3</option>

          <option value="">122.1</option>

          <option value="">122.2</option>

        </select>

      </td>

      <td>

        <input type="text" name="role" value="">

      </td>

      <td>

        <input type="text" name="Comments" value="">

      </td>

      <td>

        <select class="project">

          <option value=""></option>

          <option value="">ProA</option>

          <option value="">ProB</option>

          <option value="">ProC</option>

          <option value="">ProD</option>

        </select>

      </td>

    </tr>

    <tr>

      <td>

        <input type="text" name="sid" value="">

      </td>

      <td>

        <select class="sprint">

          <option value=""></option>

          <option value="">121.1</option>

          <option value="">121.2</option>

          <option value="">121.3</option>

          <option value="">122.1</option>

          <option value="">122.2</option>

        </select>

      </td>

      <td>

        <input type="text" name="role" value="">

      </td>

      <td>

        <input type="text" name="Comments" value="">

      </td>

      <td>

        <select class="project">

          <option value=""></option>

          <option value="">ProA</option>

          <option value="">ProB</option>

          <option value="">ProC</option>

          <option value="">ProD</option>

        </select>

      </td>

    </tr>

    <tr>

      <td>

        <input type="text" name="sid" value="">

      </td>

      <td>

        <select class="sprint">

          <option value=""></option>

          <option value="">121.1</option>

          <option value="">121.2</option>

          <option value="">121.3</option>

          <option value="">122.1</option>

          <option value="">122.2</option>

        </select>

      </td>

      <td>

        <input type="text" name="role" value="">

      </td>

      <td>

        <input type="text" name="Comments" value="">

      </td>

      <td>

        <select class="project">

          <option value=""></option>

          <option value="">ProA</option>

          <option value="">ProB</option>

          <option value="">ProC</option>

          <option value="">ProD</option>

        </select>

      </td>

    </tr>

  </table>

  <br>

  <input type="submit" value="submit" onclick="submitData()">








function submitData() {

  var dataPassed = false,

    dataCount = 0,

    hasEnteredData = false;

  $('#productTable tr:not(:first)').each(function(index) {



    var sprint = $(this).find('.sprint :selected').text(),

      role = $(this).find('input[name="role"]').val(),

      project = $(this).find('.project :selected').text();

    if (sprint && role && project) {

      dataPassed = true

      dataCount++;

    }

    else if (!sprint && !role && !project) {

      // all empty, skip

    }

    else {

      alert('Required data missing in row: ' +

        (index + 1) + 'nfill: Sprint, Role, Project')

      dataPassed = false;

      hasEnteredData = true;

      return false;

    }

  })



  if (dataPassed) {

    alert('Success, Data count: ' +

      dataCount + ' rows, submit?');

    // do submit

  }

  else if (!hasEnteredData) {

    alert('No data entered')

  }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>



<table id="productTable" border="1">



    <tr>

      <th>SID</th>

      <th>Sprint <span style="color:red;">*</span></th>

      <th>Role<span style="color:red;">*</span></th>

      <th>Comments</th>

      <th>Project<span style="color:red;">*</span></th>

    </tr>



    <tr>

      <td>

        <input type="text" name="sid" value="">

      </td>

      <td>

        <select class="sprint">

          <option value=""></option>

          <option value="">121.1</option>

          <option value="">121.2</option>

          <option value="">121.3</option>

          <option value="">122.1</option>

          <option value="">122.2</option>

        </select>

      </td>

      <td>

        <input type="text" name="role" value="">

      </td>

      <td>

        <input type="text" name="Comments" value="">

      </td>

      <td>

        <select class="project">

          <option value=""></option>

          <option value="">ProA</option>

          <option value="">ProB</option>

          <option value="">ProC</option>

          <option value="">ProD</option>

        </select>

      </td>

    </tr>

    <tr>

      <td>

        <input type="text" name="sid" value="">

      </td>

      <td>

        <select class="sprint">

          <option value=""></option>

          <option value="">121.1</option>

          <option value="">121.2</option>

          <option value="">121.3</option>

          <option value="">122.1</option>

          <option value="">122.2</option>

        </select>

      </td>

      <td>

        <input type="text" name="role" value="">

      </td>

      <td>

        <input type="text" name="Comments" value="">

      </td>

      <td>

        <select class="project">

          <option value=""></option>

          <option value="">ProA</option>

          <option value="">ProB</option>

          <option value="">ProC</option>

          <option value="">ProD</option>

        </select>

      </td>

    </tr>

    <tr>

      <td>

        <input type="text" name="sid" value="">

      </td>

      <td>

        <select class="sprint">

          <option value=""></option>

          <option value="">121.1</option>

          <option value="">121.2</option>

          <option value="">121.3</option>

          <option value="">122.1</option>

          <option value="">122.2</option>

        </select>

      </td>

      <td>

        <input type="text" name="role" value="">

      </td>

      <td>

        <input type="text" name="Comments" value="">

      </td>

      <td>

        <select class="project">

          <option value=""></option>

          <option value="">ProA</option>

          <option value="">ProB</option>

          <option value="">ProC</option>

          <option value="">ProD</option>

        </select>

      </td>

    </tr>

  </table>

  <br>

  <input type="submit" value="submit" onclick="submitData()">





function submitData() {

  var dataPassed = false,

    dataCount = 0,

    hasEnteredData = false;

  $('#productTable tr:not(:first)').each(function(index) {



    var sprint = $(this).find('.sprint :selected').text(),

      role = $(this).find('input[name="role"]').val(),

      project = $(this).find('.project :selected').text();

    if (sprint && role && project) {

      dataPassed = true

      dataCount++;

    }

    else if (!sprint && !role && !project) {

      // all empty, skip

    }

    else {

      alert('Required data missing in row: ' +

        (index + 1) + 'nfill: Sprint, Role, Project')

      dataPassed = false;

      hasEnteredData = true;

      return false;

    }

  })



  if (dataPassed) {

    alert('Success, Data count: ' +

      dataCount + ' rows, submit?');

    // do submit

  }

  else if (!hasEnteredData) {

    alert('No data entered')

  }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>



<table id="productTable" border="1">



    <tr>

      <th>SID</th>

      <th>Sprint <span style="color:red;">*</span></th>

      <th>Role<span style="color:red;">*</span></th>

      <th>Comments</th>

      <th>Project<span style="color:red;">*</span></th>

    </tr>



    <tr>

      <td>

        <input type="text" name="sid" value="">

      </td>

      <td>

        <select class="sprint">

          <option value=""></option>

          <option value="">121.1</option>

          <option value="">121.2</option>

          <option value="">121.3</option>

          <option value="">122.1</option>

          <option value="">122.2</option>

        </select>

      </td>

      <td>

        <input type="text" name="role" value="">

      </td>

      <td>

        <input type="text" name="Comments" value="">

      </td>

      <td>

        <select class="project">

          <option value=""></option>

          <option value="">ProA</option>

          <option value="">ProB</option>

          <option value="">ProC</option>

          <option value="">ProD</option>

        </select>

      </td>

    </tr>

    <tr>

      <td>

        <input type="text" name="sid" value="">

      </td>

      <td>

        <select class="sprint">

          <option value=""></option>

          <option value="">121.1</option>

          <option value="">121.2</option>

          <option value="">121.3</option>

          <option value="">122.1</option>

          <option value="">122.2</option>

        </select>

      </td>

      <td>

        <input type="text" name="role" value="">

      </td>

      <td>

        <input type="text" name="Comments" value="">

      </td>

      <td>

        <select class="project">

          <option value=""></option>

          <option value="">ProA</option>

          <option value="">ProB</option>

          <option value="">ProC</option>

          <option value="">ProD</option>

        </select>

      </td>

    </tr>

    <tr>

      <td>

        <input type="text" name="sid" value="">

      </td>

      <td>

        <select class="sprint">

          <option value=""></option>

          <option value="">121.1</option>

          <option value="">121.2</option>

          <option value="">121.3</option>

          <option value="">122.1</option>

          <option value="">122.2</option>

        </select>

      </td>

      <td>

        <input type="text" name="role" value="">

      </td>

      <td>

        <input type="text" name="Comments" value="">

      </td>

      <td>

        <select class="project">

          <option value=""></option>

          <option value="">ProA</option>

          <option value="">ProB</option>

          <option value="">ProC</option>

          <option value="">ProD</option>

        </select>

      </td>

    </tr>

  </table>

  <br>

  <input type="submit" value="submit" onclick="submitData()">






share|improve this answer












share|improve this answer



share|improve this answer










answered Nov 20 '18 at 20:50









ewwinkewwink

11.7k22238




11.7k22238













  • Thanks for the inputs. Instead of showing an alert message I want to display an error message near each row of the missing required fields on the right hand side of the table with red color font. Is it possible?

    – dexter
    Nov 20 '18 at 20:57











  • it just example. it possible but need more work, try find js form library.

    – ewwink
    Nov 20 '18 at 21:01



















  • Thanks for the inputs. Instead of showing an alert message I want to display an error message near each row of the missing required fields on the right hand side of the table with red color font. Is it possible?

    – dexter
    Nov 20 '18 at 20:57











  • it just example. it possible but need more work, try find js form library.

    – ewwink
    Nov 20 '18 at 21:01

















Thanks for the inputs. Instead of showing an alert message I want to display an error message near each row of the missing required fields on the right hand side of the table with red color font. Is it possible?

– dexter
Nov 20 '18 at 20:57





Thanks for the inputs. Instead of showing an alert message I want to display an error message near each row of the missing required fields on the right hand side of the table with red color font. Is it possible?

– dexter
Nov 20 '18 at 20:57













it just example. it possible but need more work, try find js form library.

– ewwink
Nov 20 '18 at 21:01





it just example. it possible but need more work, try find js form library.

– ewwink
Nov 20 '18 at 21:01


















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid …



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53399359%2fvalidating-all-the-html-rows-when-the-form-is-submitted%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

MongoDB - Not Authorized To Execute Command

Image
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box; } 0 I have successfully enabled authorization on MongoDB and I have created an account on the admin database and then I created an account for my database called test. The following connection string to connect to my test database works successfully: mongo --host 192.168.17.52 --port 27017 -u user1 -p password --authenticationDatabase test Only problem I have now is, I cannot execute commands such as: show dbs. I get the following error when I try to do so: "errmsg" : "not authorized on admin to execute command { listDatabases: 1.0, lsid: { id: UUID("a1d5bc0d-bc58-485e-b232-270758a89455") }, $db: "admin...
Read more

in spring boot 2.1 many test slices are not allowed anymore due to multiple @BootstrapWith

Image
1 I tried to upgrade a yummy sandwich made of two test slices (@JsonTest and @JdbcTest in my case, crunchy test code in between) adding spring boot 2.1 flavour to it. But it seems it was not much of a success. I cannot annotate my tests with many @...Test since they are now each bringing their own XxxTestContextBootstrapper. It used to work when they all used same SpringBootTestContextBootstrapper. @RunWith(SpringRunner.class) @JdbcTest @JsonTest public class Test { @Test public void test() { System.out.printn("Hello, World !"); } } The error I get from BootstrapUtils is illegalStateException : Configuration error: found multiple declarations of @BootstrapWith for test class I understand I might be doing something wrong here but is there an easy way I could load both Json and Jdbc contex...
Read more

How to fix TextFormField cause rebuild widget in Flutter

Image
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box; } 0 I've got the same issue at #9280. I tried all solutions from that topic with/without GlobalKey for Scaffold and Form but the problem wasn't fixed. I tried to build a authentication form with login and signup. But the keyboard doesn't show when I tap the TextFormField at the first time. Then I try to input some letter from physical keyboard, the widget is rebuilt. Like this: login screen Nothing to be log when I run flutter run --verbose, so I logged manually. Every tapping on field, the widget called dispose -> init -> build. [√] Flutter (Channel beta, v1.0.0, on Microsoft Windows [Version 10.0.17763.195], ...
Read more