javascript - Form Validation with multiple DIVs showing by show/hide functionality -

i have multiple divs in page being shown 1 one using show/hide functionality. 2 divs contains form requires validation.

in these divs not able use html 5 validation when click on submit button, particular div hides , next div shows.

so basically, before next div appear, first div must show validations required.

please find code mentioned below:-

html div 1 form 1

<div id="step3content" role="step3locationinformation" class="marginleft nodisplay">   <form>     <h1>location information</h1>         <table width="80%" id="locinfo">             <colgroup>                 <col width="20%" />                 <col />             </colgroup>             <tr>                 <th>street #1</th>                 <td>                     <input type="text" name="lname" id="sadd1" required="required" /><span class="required">*</span></td>             </tr>             <tr>                 <th>street #2</th>                 <td>                     <input type="text" name="lname" id="sadd2" /></td>             </tr>             <tr>                 <th>city</th>                 <td>                     <input type="text" name="city" id="city" required="required" /><span class="required">*</span></td>             </tr>             <tr>                 <th>state/province</th>                 <td>                     <input type="text" name="state" id="state" required="required" /><span class="required">*</span></td>             </tr>             <tr>                 <th>postal code</th>                 <td>                     <input type="text" name="pcode" id="pcode" required="required" /><span class="required">*</span></td>             </tr>             <tr>                 <th>country</th>                 <td>                     <select required="">                         <option>select country</option>                         <option>canada</option>                         <option>united states</option>                     </select>                     <span class="required">*</span>                 </td>             </tr>             <tr>                 <th>phone</th>                 <td>                     <input type="text" name="phoneno" id="phoneno" value="+" /><span class="required">*</span></td>             </tr>          </table>      <div role="button" class="margintop50 marginbottom">         <input type="button" id="step3back" value="back" class="active" />         <input type="submit" id="step3confirmnext" value="next" class="active marginleft50" />     </div> </form> 

html div 2 form 2 (which require validation)

<div id="step4content" role="step4" class="marginleft nodisplay">   <form>     <h1>url configuration</h1>     <div>         <p>please provide url in field below:-</p>         <p><input type="url" name="urlconf" id="urlconf" value="http://" required="required" /><span class="required">*</span></p>      </div>     <div role="button" class="margintop50 marginbottom">         <input type="button" id="step4back" value="back" class="active" />         <input type="button" id="step4confirmnext" value="next" class="active marginleft50" />     </div> </form> 

jquery have used show/hide divs:

            $("#step3confirmnext").click(function () {                $("#step3content").addclass("nodisplay");                $("#step4content").removeclass("nodisplay");         });          $("#step4back").click(function () {             $("#step3content").removeclass("nodisplay");             $("#step4content").addclass("nodisplay");         });          //function moving step 4 step 5 , back, on click of "next" , button          $("#step4confirmnext").click(function () {             $("#step4content").addclass("nodisplay");             $("#step5content").removeclass("nodisplay");         });          $("#step5back").click(function () {             $("#step4content").removeclass("nodisplay");             $("#step5content").addclass("nodisplay");         }); 

can guys please guide how can add validation code.

let me know if require more info. thanks

if have validation happening after submit 1 of forms, can bind submit "step3confirmnext" button.

reference form want, , $(form).submit();

if aren't validating after submit, can write own validation in jquery, or send ajax request , return validation parameters.

found jquery validator on google if want try that