Examples > Security Rules > Validate Example

Example from https://firebase.com/docs/platforms/web/guide/security-data.html

by Firebase

HTML

<script src="https://cdn.firebase.com/js/client/1.0.17/firebase.js"></script>
<script src="https://rawgit.com/katowulf/d9cffd402169aa55e308/raw/144d1ede003946fabade3ba489d25a04cbcbd576/demo-utils.js"></script>
<fieldset>
    <legend>Type something...</legend>
    <input type="text" /><button>save</button>
    <br /><label>0 characters</label>
    <p>Value at server: <span></span></p>
</fieldset>
<fieldset>
    <legend>Result</legend>
    <p class="result">waiting for you...</p>
</fieldset>
<p data-target="demo-links"></p>

CSS

pre {
    background-color: #eee;
    border: 1px solid #aaa;
    padding: 10px;
    border-radius: 10px;
    width: auto;
    display: block;
    white-space: pre-wrap;
}
fieldset {
    margin: 0 10px 10px 10px;
    float: left;
    border-radius: 5px;
    border: 1px solid #aaa;
}
p.result { color: red; }
p.result.success { color: green; }
label { font-size: 12px; color: #aaa; }

JavaScript

function runExample(demoUrl) {
    
    var ref = new Firebase(demoUrl);
    $('button').click(function () {
        var val = $('input').val();
        ref.set(val, result);
    });
    $('input').on('keyup', countChars);
    
    function result(err) {
        if( err ) {
            $('p.result').removeClass('success').text(err.code);
        }
        else {
           $('p.result').addClass('success').text('success!');   
        }
    }
    
    function countChars() {
       $('label').text( $(this).val().length + ' characters');   
    }
    
    // show the current value
    ref.on('value', log);
    function log(snap) {
        $('span').text(JSON.stringify(snap.val(), null, 2));
    }

}

// Dependencies used in this fiddle:
// code.jquery.com/jquery-2.1.0.min.js
// cdn-gh.firebase.com/demo-utils-script/demo-utils.js
//
// This line creates a unique, private Firebase URL 
// you can hack in! Have fun!
$.loadSandbox('web/sec/validate-example').then(runExample);