CODEWITHSUNDEEP
javascripthtml
Subash Basnayake
Subash Basnayake

Reputation: 143

passing element id to function as parameter

this is my .js function

function validateSNo(inputtxt,elem){
            var SNoFormat = /^\d{6}$/;
            if (SNoFormat.test(inputtxt)){
                document.getElementById(elem).innerHTML = "";
                return true;
            }
            else {
                document.getElementById(elem).innerHTML = "This should only contain 6 numbers XXXXXX";
                return false;
            }

this is the html code

<label>Student No.</label>
                            <input type="text" name="sNo" size="6" maxlength="6" onblur="return validateSNo(document.FormStuReg.sNo.value,sNo-validation)" autofocus><span class="errorMsg">*</span>
                            <br>
                            <span class="errorMsg" id="sNo-validation"></span>

i want to display the validation message in the span area when an invalid input is detected.this code doesn't work..It works fine without the parameters when the function is written like this.

function validateSNo(){
        var SNoFormat = /^\d{6}$/;
        if (SNoFormat.test(document.FormStuReg.sNo.value)){
          document.getElementById("sNo-validation").innerHTML = "";
          return true;
        }
        else {
          document.getElementById("sNo-validation").innerHTML = "This should only contain 6 numbers XXXXXX";
          return false;
        }
      }

I have to use the same validation in few other places so its better if i can pass the values as parameters to single function or else i have to write the same function over n over again with different element id's.

Upvotes: 0

Views: 126

Answers (2)

RobG
RobG

Reputation: 147403

BTW, since you are using a scheme like sNo and sNo-validation then you don't need to pass the ID. I'll guess that document.FormStuReg.sNo.value is the input that the listener is on, so you can just pass a reference to the element using this:

<input ... name="sNo" ... onblur="return validateSNo(this)" ... >

And then in the function:

// element will reference the input
function validateSNo(element){
    var SNoFormat = /^\d{6}$/;

    if (SNoFormat.test(element.value)){

      // Use the element name to get the message element
      document.getElementById(element.name + "-validation").innerHTML = "";
      return true;
    }
    else {
      document.getElementById(element.name + "-validation").innerHTML = "This should only contain 6 numbers XXXXXX";
      return false;
    }
  }

and the if..else can use the conditional ? : operator:

   document.getElementById(element.name + "-validation").innerHTML = SNoFormat.test(element.value)? '' : 'This should only contain 6 numbers XXXXXX';

Returning true or false from the listener has no effect whatever.

If you take this one step further, you can define the validation to run in a class value or data- attribute, then you don't need to pass anything. Just validate all form controls based on their class or data- values.

Upvotes: 0

Josiah Keller
Josiah Keller

Reputation: 3675

Look at the onblur attribute in your HTML.

onblur="return validateSNo(document.FormStuReg.sNo.value,sNo-validation)"

Notice that sNo-validation is not in quotation marks. That means that it's interpreted as two variables: sNo and validation, which are undefined, and the - is interpreted as a minus sign. Subtracting two undefined variables doesn't make sense, so that's why you get an error.

Just add quotation marks. Since it's already inside quotation marks because it's an HTML attribute, use single quotes.

onblur="return validateSNo(document.FormStuReg.sNo.value, 'sNo-validation')"

Upvotes: 1

Related Questions