CODEWITHSUNDEEP
javascriptjqueryformsvalidationinput
Erik
Erik

Reputation: 5791

Change DIV border color with form validation

I am using a DIV "find_frame" to wrap an input field.

I need to change the DIV "find_frame border color if the validation stops the submit.

How do I do this?

<form>
    <div class="find_frame">
        <input type="text" id="find" name="find" placeholder="Enter Number">
    </div>
    <input id="findbutton" type="button" value="FIND ME">
</form>

Thank you.

Upvotes: 1

Views: 384

Answers (1)

Jonathan.Brink
Jonathan.Brink

Reputation: 25383

Try a pattern like this:

var $ff = $('.find_frame');
var $input = $('#find');
var $button = $('#findbutton');

function PUTVALIDATIONHERE(value) {
    return false;
}

$button.click(function() {
    var value = $input.val();
    if (!PUTVALIDATIONHERE(value)) {
        $ff.css("borderColor", "red");

        // or use a css class
        $ff.addClass('validationError');
    }
});

If the validation you need is to check whether the input is a number or not, replace the PUTVALIDATIONHERE function with this:

function isNumeric(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
}

Upvotes: 2

Related Questions