how to control validation in javascript

Question

I have a page for Registering a user. In that page i have divided fields in two tabs.All the fields are Required.If user did not enter field in first tab i get validation error in second tab since its a single page.how to control validation for second tab.

<ul>
<li>first tab</li>
<li>second tab</li>
</ul>
    <div class="row setup-content" id="step-1"> //first tab
<input class='form-control' id='username' required='required' name='username' placeholder='First Name*' type='text' data-error="Please enter name field.">
<button id='next'>Next</button>
</div>

<div class="row setup-content" id="step-1"> //second tab
    <input class='form-control' id='password' required='required' name='password' placeholder='Enter password' type='text' data-error="Please enter Password">
    </div>

<script>
$('#next').click(// code for moving to second tab);
</script>

If i click next button without entering username,the username field gets highlighted and after entering username and moving to second tab by clicking next button, the password field is also highlighted because of error caused while not entering username.

Thanks in advance

philipp · Accepted Answer · 2017-07-03 11:21:26Z

2

Basically validation works like that, on each change, validate everything, so all empty fields appear invalid. There is one thing you can do: Define a »pristine« property to each field, set this to false after the first change of that field. This way you can exclude »untouched« fields from being validated.

But that will prevent validation of »pristine« fields on submit, so there you have to validate each in every case.

answered Jul 3, 2017 at 11:21

philipp

16.6k15 gold badges66 silver badges121 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Waseem Siddiqui · Accepted Answer · 2017-07-03 11:32:57Z

0

Quickest solution is to disable fields inside hidden tabs and once current tab is filled and valid, switch to next tab and repeat the process.

answered Jul 3, 2017 at 11:32

Waseem Siddiqui

1264 bronze badges

Collectives™ on Stack Overflow

how to control validation in javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related