Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
    <div id="container"></div>
    
    <script type="text/ractive" id="template">
      <label for="name">Name</label>
        <input type="text" id="name" value="{{validate.name.value}}">
        
        <label for="choice">Contact type</label>
        <input type="radio" name="choice" value="email" checked="{{choice.email}}"> Email 
        <br>
        <input type="radio" name="choice" value="phone" checked="{{choice.phone}}"> Phone
        
        {{#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}}
        
        {{#if choice.phone}}
          <label for="name">Phone</label>
          <input type="text" id="name" value="{{validate.phone.value}}">
            
            {{! This is used so that I can know which field is in use}}
          {{ isInUse('validate.email.isInUse', false) }}
          {{ isInUse('validate.phone.isInUse', true) }}
        {{/if}}
        
        <br>
        
        <input type="submit" value="submit" {{#unless formValid}}disabled{{/unless}}>
    </script>
    
  <script src='http://cdn.ractivejs.org/latest/ractive.min.js'></script>
</body>
</html>
 
var ractive = new Ractive({
    el: '#container',
    template: '#template',
    data: {
        choice: {
            email: false,
            phone: false
        },
​
        validate: {
            name: {
                isValid: false,
                isInUse: true,
                value: ''
            },
            email: {
                isValid: false,
                isInUse: false,
                value: ''
            },
            phone: {
                isValid: false,
                isInUse: false,
                value: ''
            }
        },
​
        formValid: false,
​
        isInUse: function (keypath, bool) {
            this.set(keypath, bool);
        }
    }
});
​
ractive.observe('validate.*', function(newValue, oldValue, keypath) {
    var entireFormIsValid = false;
    
    // Very simple validation check
    if(newValue.value.length > 0){
        ractive.set(keypath + '.isValid', true);
    } else {
        ractive.set(keypath + '.isValid', false);
    }
    console.log(keypath + ':', newValue);
    
    
    // Check if the entire form is valid so we can enable the submit button
    // Loop through all child objects of the validate object & check if the isValid property if true
    validate = ractive.get('validate');
    for (var prop in validate) {
        if (validate.hasOwnProperty(prop)) {
//          if (validate[prop].isInUse === false) {
            if (validate[prop].isValid === false && validate[prop].isInUse === true) {
                entireFormIsValid = false;
                break;
            }
            entireFormIsValid = true;
        }
    }
    console.log('entireFormIsValid:', entireFormIsValid, ractive.get('validate'));
    ractive.set('formValid', entireFormIsValid);
});
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
MrMartineaupro
0viewers