Q:

Validating an input that is dependant of an other

I'm trying to make a small form with two numeric input fields, input two will be dependant of input one as follows two = one+/-x
<form id="test" class="form-horizontal">
 <input type="number" step="any" class="form-control" name="v1" id="v1"/>
 <input type="number" step="any" class="form-control" name="v2" id="v2"/>
</form>
<script>
$(document).ready(function() {
 $('#test').formValidation({
    fields: {
        v1: {
            validators: {
                between: {
                    min: 10,
                    max: 50,
                    message: ''
                }
            }
        },
        var temp = document.getElementsByName("v1")[0].value,
        a1 = temp -1,
        a2 = temp +1,
        v2: {
            validators: {
                between: {
                    min: 'a1',
                    max: 'a2',
                    message: ''
                }
            }
        }
    }
});
});
</script>

What am I doing wrong?

A:

Got it working by doing this:
Main page
<script>
function showHint(str) {
if (str.length == 0) { 
    document.getElementById("txtHint").innerHTML = "";
    return;
} else {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("txtHint").innerHTML =   xmlhttp.responseText;
        }
    };
    xmlhttp.open("GET", "gethint.php?q=" + str, true);
    xmlhttp.send();
}
}
</script>
<form id="test" class="form-horizontal">
<div class="form-group">
    <label class="col-xs-3 control-label">V1</label>
    <div class="col-xs-5">
        <input type="number" step="any" class="form-control" name="v1" id="v1" onkeyup="showHint(this.value)"/><p>10 to 50</p>
    </div>
</div>

<div class="form-group">
    <label class="col-xs-3 control-label">V2</label>
    <div class="col-xs-5">
        <input type="number" step="any" class="form-control" name="v2" id="v2"/><div id="txtHint"></div>
    </div>
</div>
</form>
<script>
$(document).ready(function() {
$('#test').formValidation({

    framework: 'bootstrap',
    icon: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
        v1: {
            validators: {
                between: {
                    min: 10,
                    max: 50,
                    message: ''
                }
            }
        },
        v2: {
            validators: {
                between: {
                    min: 'v2a',
                    max: 'v2b',
                    message: ''
                }
            }
        }
    }
});
});
</script>

gethint.php
if($_GET['q'] == null || $_GET['q'] == ""){}else{
$min = $_GET['q']-1;
$max = $_GET['q']+1;
echo"<p>".$min." to ".$max."</p>
    <input type=\"hidden\" name=\"v2a\" id=\"v2a\" value=\"".$min."\">
    <input type=\"hidden\" name=\"v2b\" id=\"v2b\" value=\"".$max."\">";
}

I'm sure there is probably a better or an easier way, but this does what I need.

