Formula Validator and Executor

This is a simple Bootstrap skeleton. You can fork it to get a ready to use Bootstrap fiddle.

by edgardleal

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<div class="panel panel-default">
    <div class="panel-heading">
       <div class="panel-title">
           Validação de funções
       </div>
    </div>
    <div class="panel-body">
        <form action="" class="form form-default" method="POST">
            <div class="form-group">
                <label for="">A</label>
                <div class="col-sm-8">
                    <input type="text" value="557" name="A" />
                </div>
            </div>
            <div class="form-group">
                <label for="">B</label>
                <div class="col-sm-8">
                    <input type="text" value="274" name="B" />
                </div>
            </div>            
            <div class="form-group">
                <label for="">C</label>
                <div class="col-sm-8">
                    <input type="text" value="55" name="C" />
                </div>
            </div>             
            <div class="form-group">
                <label for="">D</label>
                <div class="col-sm-8">
                    <input type="text" value="100" name="D" />
                </div>
            </div>                    
            <div class="form-group">
                <label for="" class="">Fórmula</label>
                <div >
                    <input type="text" name="formula" class="form-control alert-default" placeholder="Digite a fórmula"/>
                </div>
            </div>
            <div class="form-group">
                <button class="btn btn-success">Efetuar</button>
            </div>
        </form>
    </div>
    <div class="panel-footer">
        
    </div>
</div>

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

JavaScript

function log(text){
    $('.panel-footer').text(text);
} 
Validator = function(input){
    this.variables = "(A|B|C|D)";
    this.input = input;
    this.regex = new RegExp("^ *((\\d+(\\.\\d+)?)|" + this.variables + ") *" + 
      "( *[\\+\\-\\*\\/] *((\\d+(\\.\\d+)?)|" + this.variables + "))* *$", "i");
    self = this;
    $(this.input).keypress(function(e){
       self.validate(this.value + String.fromCharCode(e.keyCode));
    });
    this.validate = function(text){
        console.log(text);
        if(this.regex
       .test(text))
         success(input);
       else
         error(input);
    };
    success = function(){
        $(input).addClass('alert-success').removeClass('alert-danger');
    };
    
    error = function(){
       $(input).removeClass('alert-success').addClass('alert-danger');
    }            
}

validator = new Validator($('input[name=formula]').get(0));
$("button").click(function(e){
    values = "var A = " + $("input[name=A]").val() + ";\n" +
             "var B = " + $("input[name=B]").val() + ";\n" +
             "var C = " + $("input[name=C]").val() + ";\n" +
             "var D = " + $("input[name=D]").val() + ";\n" ;
    
    values += $('input[name=formula]').val();
    alert(eval(values));
    e.preventDefault();
});