javascript - Need a better way to handle complex conditional form logic & validation with Ractive.js -

i building complex form lot of conditional logic. mean, when users check 1 option, 1 or more others maybe revealed or hidden - you've seen many times before..

using ractive's mustache templates , many {{#if }} statements have created form, logic validation , submission needs improvement. need enable submit button when 'visible' fields valid, have concluded each field needs isinuse property isvalid, see below example:

data: {     foo: {         isvalid: false,         isinuse: false,         value: ''     } } 

the reason field made visible option hide & might still have value user not need submit.

i have determined reliable way change isinuse property create function in data can accessed template, so:

data: {     foo: {         isvalid: false,         isinuse: false,         value: ''     },      isinuse: function (keypath, bool) {         ractive.set(keypath, bool);     } } 

which used in templates so:

{{#if choice.email}}       {{ isinuse('validate.email.isinuse', true) }}       {{ isinuse('validate.phone.isinuse', false) }}        <label for="email">email</label>       <input type="text" id="email" value="{{validate.email.value}}"> {{/if}} 

this means able change value on template-side.. means can check if each field in use , valid.. questioning implementation, idea?

i have created simple version of form on jsbin (which works validation & submission), see here: http://jsbin.com/wasoxa/2/edit?html,js,output form more complex i'd find graceful way of handling of this.

calling isinuse within template creative solution, unfortunately break!

you should think of expressions in templates being read-only - can call function within expression, value, never side-effects such setting value (the 1 possible exception being log output debugging). reason you're not in direct control of when function called - ractive handles on behalf - can unexpected results. in example above, changing choice.email true false won't have desired effect.

you want computed properties. these can read inside template regular properties, except value depends on other data (or other computed properties):

ractive = new ractive({   el: 'body',   template: 'twice {{foo}} {{doublefoo}}',   data: { foo: 1 },   computed: {     doublefoo: function () {       return 2 * this.get( 'foo' );     }   } }); 

whenever foo changes, doublefoo knows (because called this.get('foo') inside definition) should recompute itself. can use computed values you'd use other value - e.g. ractive.observe('doublefoo',dosomething).

this can useful validation:

var ractive = new ractive({    el: 'main',    template: `      <h2>contact type</h2>      <label>        <input type="radio" name="{{contacttype}}" value="email"> email      </label>      <label>        <input type="radio" name="{{contacttype}}" value="telephone"> telephone      </label>  		      <h2>name</h2>      <input type="text" value="{{name}}">      <p>name valid: {{nameisvalid}}</p>  		      {{#if contacttype === "email"}}        <h2>email</h2>        <input type="text" value="{{email}}">        <p>email valid: {{emailisvalid}}</p>      {{/if}}`,    computed: {      nameisvalid: function () {        return !!this.get( 'name' );      },      emailisvalid: function () {        var email = this.get( 'email' );          // never use regex        return /^\w+@[a-za-z_]+?\.[a-za-z]{2,3}$/.test( email );      }    }  });

<script src="http://cdn.ractivejs.org/latest/ractive.js"></script>  <main></main>