Javascript validate two textbox

Question

The code below validate two nameserver textbox. As you can see there is redundancy in the javascript code. // validate textbox 1 and // validate textbox 2. Is there anyway I could just use one script.. you know I just want to use 1 validation function to validate two textbox. I'm sorry for my English I hope you all can understand me. Thank you.

    <script type="text/javascript">

// validate textbox 1
     function validate_domain(){
       var nameserver1 = document.getElementById('nameserver1').value;
       var domain_array = nameserver1.split('.');

      var domain = domain_array[0];
    //This is reguler expresion for domain validation
      var reg = /^([A-Za-z0-9])+[A-Za-z0-9-]+([A-Za-z0-9])$/;

    if(domain == ''){
         alert("Please enter the domain name"); 
         document.getElementsById('nameserver1').focus();
         return false; 
    } 

    if(reg.test(domain) == false){
       alert("Invalid character in domain. Only letters, numbers or hyphens are allowed.");
      document.getElementsById('nameserver1').focus();
       return false;
    }

    }



    // validate textbox 2
     function validate_domain(){
       var nameserver1 = document.getElementById('nameserver1').value;
       var domain_array = nameserver2.split('.');

      var domain = domain_array[0];
    //This is reguler expresion for domain validation
      var reg = /^([A-Za-z0-9])+[A-Za-z0-9-]+([A-Za-z0-9])$/;

    if(domain == ''){
         alert("Please enter the domain name"); 
         document.getElementsById('nameserver2').focus();
         return false; 
    } 

    if(reg.test(domain) == false){
       alert("Invalid character in domain. Only letters, numbers or hyphens are allowed.");
      document.getElementsById('nameserver2').focus();
       return false;
    }

    }
    </script>

 <fieldset class="inlineLabels">

            <label for="name">Nameserver 1</label>
            <input type="text" class="textInput" maxlength="255" size="30" value="" id="nameserver1" name="nameserver1">

            <label for="data">Nameserver 2</label>
            <input type="text" class="textInput" maxlength="255" size="30" value="" id="data" name="nameserver2">

        </fieldset>

          <button onclick="validate_domain(); submitForm('page1','directpage.php');" value="Validate" name="btn_validate" type="button" class="positive iconstxt icoPositive"><span>Save</span></button>

Okay, I think i'm finally done messing with my answer now, it should be drop in ready. — Mikey G
– Mikey G, Commented Feb 8, 2012 at 19:06
I appreciate everybody help but for times being none of the provided code fully functional for me. Thanks again. — sg552
– sg552, Commented Feb 8, 2012 at 19:45

arb · Accepted Answer · 2012-02-08 20:00:15Z

1

Well here is another approach:

function ValidateDomain(){
    function CheckForBlank(domain, textBox){
        if(domain == ''){
             alert("Please enter the domain name"); 
             document.getElementsById('nameserver1').focus();
             return false; 
        } 
    }
    function CheckForFormat(domain, textBox){
        if(reg.test(domain) == false){
            alert("Invalid character in domain. Only letters, numbers or hyphens are allowed.");
            document.getElementsById('nameserver1').focus();
            return false;
        }
    }
    function GetDomainName(inputId){
        var serverName = document.getElementById(inputId).value,
            domain_array = serverName.split('.');

        return domain_array[0];
    }
    var nameserver1 = GetDomainName('nameserver1'),
        nameserver2 = GetDomainName('nameserver2'),
        nameServerInput1 = document.getElementsById('nameserver1');
        nameServerInput2 = document.getElementsById('nameserver2');

    if (CheckForFormat(nameserver1,nameServerInput1) && CheckForBlank(nameserver1,nameServerInput1) 
        && CheckForFormat(nameserver2,nameServerInput2) && CheckForBlank(nameserver2,nameServerInput2)){
        //This means you are valid
        return {
            name1:nameserver1,
            name2:nameserver2 
        }
    }
    return false;
}

edited Feb 8, 2012 at 20:00

answered Feb 8, 2012 at 19:15

arb

7,8847 gold badges35 silver badges67 bronze badges

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

2 Comments

sg552 Over a year ago

I paste your script and click empty button, alertbox appear but when I filled the textbox with data the variable is not submitted to target pages :(

arb Over a year ago

You can't just copy and paste what I've written. Where I have //This means you are valid you have to do what you need this function to do. Probably return both of the nameserver values. You could return something like {name1:nameserver1, name2:nameserver2} Check out my updated answer.

Mikey G · Accepted Answer · 2012-02-08 19:47:02Z

1

Maybe like this:

    <script type="text/javascript">

function validate_domain(){

           validateTextBox('nameserver1');
            validateTextBox('nameserver2');
}

        function validateTextBox(tbName){

               var nameserver1 = document.getElementById(tbName).value;
               var domain_array = nameserver1.split('.');

              var domain = domain_array[0];
            //This is reguler expresion for domain validation
              var reg = /^([A-Za-z0-9])+[A-Za-z0-9-]+([A-Za-z0-9])$/;

            if(domain == ''){
                 alert("Please enter the domain name"); 
                 document.getElementsById(tbName).focus();
                 return false; 
            } 

            if(reg.test(domain) == false){
               alert("Invalid character in domain. Only letters, numbers or hyphens are allowed.");
              document.getElementsById(tbName).focus();
               return false;
            }

            }

        }
            </script>

edited Feb 8, 2012 at 19:47

answered Feb 8, 2012 at 19:03

Mikey G

3,5011 gold badge24 silver badges27 bronze badges

1 Comment

sg552 Over a year ago

I paste your script and click empty button, unfortunately no alertbox appear :(

Community · Accepted Answer · 2017-05-23 10:34:17Z

1

Saw this one at work. Played with it at home. Here's a working jsFiddle. Yes, it's overly complex, but I detest alert('annoying pop-up');.

I commented the source, so you would better understand why I wrote it like that.

sg522: It may not copy/paste into your code and work, but I don't know what the rest of your code is. Neither are we here to write your code for you. We are here to help you learn and become a more experienced programmer.

Please let us know if you have questions.

Happy coding!

UPDATE: Modified jsFiddle to work with Opera and Firefox 10. Neither Opera or Firefox apparently allow cloneNode to be called without parameters now. Opera also apparently does not allow chained variable declarations.

edited May 23, 2017 at 10:34

CommunityBot

11 silver badge

answered Feb 9, 2012 at 4:54

pete

25.2k4 gold badges40 silver badges52 bronze badges

5 Comments

sg552 Over a year ago

If I understand correctly I will see the output in <div id="nameserverInputs"></div> correct? I test the code with empty input at jsFiddle and it don't work?

pete Over a year ago

You understand correctly. It works for me in Google Chrome. What browser are you using to test it with?

sg552 Over a year ago

It turns out it didn't work for Opera 11.61 and Firefox 10.0 but works with IE 9.0 and Safari 5.1. Is there anyway you could make it cross browser compatible?

sg552 Over a year ago

What a shame. I have test your solutions with my app and it works beautifully but it not cross browser compatible.

pete Over a year ago

Modified jsFiddle to work with Opera and Firefox 10. Neither Opera or Firefox apparently allow cloneNode to be called without parameters now. Opera also apparently does not allow chained variable declarations.

Justin Rhyne · Accepted Answer · 2012-02-08 19:05:20Z

0

Take the id of the element you want to validate as a parameter of your function.

// validate textbox
 function validate_domain(serverName){
   var server = document.getElementById(serverName).value;
   var domain_array = server.split('.');

  var domain = domain_array[0];
//This is reguler expresion for domain validation
  var reg = /^([A-Za-z0-9])+[A-Za-z0-9-]+([A-Za-z0-9])$/;

if(domain == ''){
     alert("Please enter the domain name"); 
     document.getElementsById(serverName).focus();
     return false; 
} 

if(reg.test(domain) == false){
   alert("Invalid character in domain. Only letters, numbers or hyphens are allowed.");
  document.getElementsById(serverName).focus();
   return false;
}

}

answered Feb 8, 2012 at 19:05

Justin Rhyne

2172 silver badges10 bronze badges

1 Comment

sg552 Over a year ago

I paste your script and click empty button, unfortunately no alertbox appear :(

Nabab · Accepted Answer · 2012-02-08 19:09:30Z

0

    <script type="text/javascript">

// validate textbox
     function validate_domain(ele){
       var nameserver = ele.value;
       var domain_array = nameserver.split('.');

      var domain = domain_array[0];
    //This is reguler expresion for domain validation
      var reg = /^([A-Za-z0-9])+[A-Za-z0-9-]+([A-Za-z0-9])$/;

    if(domain == ''){
         alert("Please enter the domain name"); 
         ele.focus();
         return false; 
    } 

    if(reg.test(domain) == false){
       alert("Invalid character in domain. Only letters, numbers or hyphens are allowed.");
      ele.focus();
       return false;
    }

    }
    </script>

 <fieldset class="inlineLabels">

            <label for="name">Nameserver 1</label>
            <input type="text" class="textInput" maxlength="255" size="30" value="" id="nameserver1" name="nameserver1">

            <label for="data">Nameserver 2</label>
            <input type="text" class="textInput" maxlength="255" size="30" value="" id="data" name="nameserver2">

        </fieldset>

          <button onclick="validate_domain(document.getElementById('nameserver1')); validate_domain(document.getElementById('nameserver2')); submitForm('page1','directpage.php');" value="Validate" name="btn_validate" type="button" class="positive iconstxt icoPositive"><span>Save</span></button>

answered Feb 8, 2012 at 19:09

Nabab

2,6641 gold badge20 silver badges34 bronze badges

4 Comments

sg552 Over a year ago

I paste your script and click empty button, alertbox appear but when I filled the textbox with data the variable is not submitted to target pages :(

Nabab Over a year ago

Well, it must be your submitForm function... Otherwise, you can create a form (it would be better actually), and adding to it

onsubmit="if (!validate_domain(document.getElementById('nameserver1')) || !validate_domain(document.getElementById('nameserver2')) ){return false;}"

sg552 Over a year ago

<form onsubmit="if (!validate_domain(document.getElementById('nameserver1')) || !validate_domain(document.getElementById('nameserver2')) ){return false;}" method="post" action="dns/dns_ns_wizard_pros.php"> 	<input type="submit" value="submit" name="submit"> </form>

Is this OK??

sg552 Over a year ago

It's not correct. I try it and the data is still not submitted.

Collectives™ on Stack Overflow

Javascript validate two textbox

5 Answers 5

2 Comments

1 Comment

5 Comments

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

1 Comment

5 Comments

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related