javascript check input fields are not blank and check input field length?

Question

I am using the following javascript code to check my form on submit. If any of my input boxes are blank then the script will change the border colour of the relevant input field.

I also am trying to check the formatting and character length of these input fields but seem to be having trouble with this.

My variable c is an input field for sort code's so I am checking if variable c does not exceed 6 numbers or else change the border colour to the same colour it would change if it was null. This works fine but I don't know if there's a better way of doing this than what I've done?

I also want to check to ensure only numbers are entered into this field? And would like to find out a way that I could add seperator's to the numbers being entered into the sortcode field as the user types them, so instead of just having this:

000145 

I get

00-01-45

Can someone show me how I might be able to achieve this? Thanks,

HTML:

<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" name="bank" onsubmit="return ValidateChangeBank()"> 
<input type="text" name="bank_name" id="bank_name" placeholder="Bank Name" class="input_form"  autocomplete="off">
<input type="text" name="account_name" id="account_name" placeholder="Account Name" class="input_form" autocomplete="off">
<input type="text" name="sort_code" id="sort_code" placeholder="Sortcode" class="input_form" autocomplete="off">
<input type="text" name="account_number" id="account_number" placeholder="Account Number" class="input_form" autocomplete="off"><br/><br/>

<input type="submit" name="subimt" id="submit" value="Change" class="buttons" >
</form>

Jquery

 <script>
function ValidateChangeBank() {
 var a = document.forms["bank"]["bank_name"].value;
 var b = document.forms["bank"]["account_name"].value;
 var c = document.forms["bank"]["sort_code"].value;
 var d = document.forms["bank"]["account_number"].value;

 if(c.length < 6 && c.length > 0) { document.forms["bank"]["sort_code"].style.borderColor = "#963634"; 
 return false;

 }else{

 if (a == null || a == "" || b == null || b == "" || c == null || c == ""|| d == null || d == "" ) {
 if (a == null || a == "") { document.forms["bank"]["bank_name"].style.borderColor = "#963634"; }
 if (b == null || b == "") { document.forms["bank"]["account_name"].style.borderColor = "#963634"; }
 if (c == null || c == "") { document.forms["bank"]["sort_code"].style.borderColor = "#963634"; }
 if (d == null || d == "") { document.forms["bank"]["account_number"].style.borderColor = "#963634"; }




 return false;


 };

} }

Answer 1

Try the jquery validation plugin for validation things... It's very handy and you can write custom extensions

Answer 2

Since you say that you are using jQuery you can use this jQuery code to add a border to input that are empty on submit- note: putSeparator script coming from Arvin's answer.

<script>
function putSeparator(tb) {
  if (/^\d{6}$/.test(tb.value.replace(/\D/g, ''))) {
    tb.value = tb.value.replace(/(\d{2})(\d{2})/, '$1-$2-');
    tb.style.borderColor = 'initial';
  } else {
    tb.style.borderColor = 'red';
  }
}


    function ValidateChangeBank() {
     var a = $("#bank_name").val();
     var b = $("#account_name").val();
     var c = $("#sort_code").val();
     var d = $("#account_number").val();
    if(c.length < 6 && c.length > 0) { 
        $("#sort_code").css('border-color', '#963634'); 

    }
    var intRegex = /[0-9 -()+]+$/; 

    if (a == "") { $("#bank_name").css('border-color', '#963634'); }
    if (b == "") { $("#account_name").css('border-color', '#963634'); }
    if (c == "") { $("#sort_code").css('border-color', '#963634'); }
    if (d == "") { $("#account_number").css('border-color', '#963634'); }

    putSeparator(c);
    }
$(document).ready(function() {
    $("#sort_code").keydown(function (e) {
        // Allow: backspace, delete, tab, escape, enter
        if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110]) !== -1 ||
             // Allow: Ctrl+A, Command+A
            (e.keyCode == 65 && ( e.ctrlKey === true || e.metaKey === true ) ) || 
             // Allow: home, end, left, right, down, up
            (e.keyCode >= 35 && e.keyCode <= 40)) {
                 // let it happen, don't do anything
                 return;
        }
        // Ensure that it is a number and stop the keypress
        if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
            e.preventDefault();
        }
    });
});
     </script>

Answer 3

add seperator's to the numbers being entered into the sortcode field as the user types them

In order to add separator, try this:

var putSeparator = function(tb) {
  if (/^\d{6}$/.test(tb.value.replace(/\D/g, ''))) {
    tb.value = tb.value.replace(/(\d{2})(\d{2})/, '$1-$2-');
    tb.style.borderColor = 'initial';
  } else {
    tb.style.borderColor = 'red';
  }
};

/*

tb.value.replace(/\D/g,'') will replace all non 0-9 values

^\d{6}$/.test(), will check if given text is 0-9 of size 6

tb.value.replace(/(\d{2})(\d{2})/, '$1-$2-'), here (\d{2}) gives pair of digits then those pairs are separated by using  $1-$2-

*/

<input type="text" name="sort_code" id="sort_code" placeholder="Sortcode" class="input_form" autocomplete="off" onkeyup='putSeparator(this);' />