Search code examples
angularjsasp.net-mvcparsley

parsley.js conditional form validation


I am using MVC with Angular JS and for validation using parsley.js(ver 2.6.2)

when i check checkbox1 then 2 textbox(txtCustomer,txtchk1 & txtchk2) should be required when submit form

when click on checkbox2 then textbox (txtCustomer & txtchk3) should required

My form is as below.

            <input type="checkbox" id="chkCreditCard" ng-model="dvCreditCard" ng-change="alert1(dvCreditCard)" />

            Check1 required
            <input ng-model="" type="text" class="form-control" id="txtchk1" placeholder="requied if checkbox1 checked" />
            <input ng-model="" type="text" class="form-control" id="txtchk2" placeholder="requied if checkbox1 checked" />


            <input type="checkbox" id="chkCheque" ng-model="dvCheque" />
            Check2 required
            <input ng-model="" type="text" class="form-control" id="txtchk3" placeholder="requied if checkbox2 checked" />

    </form>

Solution

  • You could use ng-required directive here to make field required based on expression

    <input type="checkbox" id="chkCreditCard" ng-model="dvCreditCard"/>
    
    Check1 required
    <input ng-model="texchk1" ng-required="dvCreditCard" type="text" 
     class="form-control" id="txtchk1" placeholder="requied if checkbox1 checked" />
    <input ng-model="txtchk2" type="text" class="form-control" ng-required="dvCreditCard" 
      id="txtchk2" placeholder="requied if checkbox1 checked" />
    <input type="checkbox" id="chkCheque" ng-required="dvCreditCard" ng-model="dvCheque" />
    
    Check2 required
    <input ng-model="txtchk3" type="text" ng-required="dvCheque" class="form-control" id="txtchk3" placeholder="requied if checkbox2 checked" />