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:

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;


 };

} }

It's not a good practice to do so. You should use plugin for this. plugin take care of every validation criteria. jqueryvalidation.org — danish farhaj
– danish farhaj, Commented Jun 9, 2015 at 9:09
Use this Link for all check validation like not null.not blank,not undefined,not zero — Ravikant
– Ravikant, Commented Jan 17, 2018 at 12:04

score 1 · Accepted Answer · 2015-06-09 09:59:31Z

1

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);' />

edited Jun 9, 2015 at 9:59

answered Jun 9, 2015 at 9:43

user2575725

Sign up to request clarification or add additional context in comments.

1 Comment

user2399035 Over a year ago

Thanks, upvoting since I have used your code in my answer to implement also the separators.

themca · Accepted Answer · 2015-06-09 09:08:47Z

0

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

answered Jun 9, 2015 at 9:08

themca

3233 silver badges15 bronze badges

1 Comment

tvgemert Over a year ago

This is more a comment than an answer.

score 0 · Accepted Answer · 2015-06-09 10:24:05Z

0

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>

edited Jun 9, 2015 at 10:24

answered Jun 9, 2015 at 9:35

user2399035

2 Comments

james Over a year ago

thanks but any ideas how I could check the sortcode field is only numbers and not text? also how might I add dividers like 00-01-49

user2399035 Over a year ago

see if this is working for you. Note that you have to include jQuery library in your headers for this to work

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related