CODEWITHSUNDEEP
javascriptforms
focusoft
focusoft

Reputation: 82

Form Validation with Javascript (Validate input text by selected option)

I have this form:

<form accept-charset="UTF-8" action="type.php" id="form" method="post">

    <label id="type" for="type" class="">Type</label>
    <select class="" id="Type" name="type">
        <option id="a" value="A">Type A</option>
        <option id="b" value="B">Type B</option>
        <option id="c" value="C">Type C</option>
        <option id="d" value="C">Type D</option>
        <option id="e" value="C">Type E</option>
    </select>

        <label for="type_number" class="inner_text">Type Number</label>
        <input name="type_number" type="text" class="false" id="type_number">
        <input type="submit" value="Confirm">
</form>

What I need to do is to validate the Type Number. Type Number must start with a number that I choose. For Example:

Type A - 1234

Type B - 2234

Type C - 3234

Type D - 4234

Type E - 5234

So Type A must start with 1, Type B with 2 and so on. I need to check only the first number.

I must to mention that I have a similar question here: Redirect to 3 pages depending of selected option with validation , it's not same thing, but is similar, also I don't get a good answer there to figure this out.

I apreciate any and all comments, thank you.

P.S. Please excuse my English.

Upvotes: 0

Views: 309

Answers (2)

Pragnesh Khalas
Pragnesh Khalas

Reputation: 2898

Check below Code this will help you.

Page Code

  <form accept-charset="UTF-8" action="verify.php" id="form" method="post">
 <label id="type" for="type" class="">Type</label>
 <select class="" id="Type" name="type">
 <option id="a" value="1">Type A</option>
 <option id="b" value="2">Type B</option>
 <option id="c" value="3">Type C</option>
 <option id="d" value="4">Type D</option>
 <option id="e" value="5">Type E</option>
 </select>
 <label for="type_number" class="inner_text">Type Number</label>
 <input name="type_number" type="text" class="false" id="type_number">
 <input type="button" id="Confirm" value="Confirm" >
 </form>

Script

 document.getElementById('Confirm').onclick = function () {

    var letter =document.getElementById("type_number").value.match(document.getElementById("Type").value);
    if (letter !== null) {
        letter = letter[0].toLowerCase();
        this.value = letter + this.value.substring(1);
    }
    else {
    alert('Number is not correct!');
    }
  }

Upvotes: 1

zozo
zozo

Reputation: 8582

You can do something like this.

var startNumbers = {'A': 1, 'B': 2, 'C': 3, 'D': 4, 'E': 5};

function validate() {
   // get type
   var type = document.getElementById('type').value;

   // get number
   var number = document.getElementById('number').value;

   // get first digit
   while (number > 0) {
      nr = number;
      number = Math.floor(number / 10);
   }

   // validate
   if (nr != startNumbers[type])
      return false;
   else
      return true;
}

Call validate when you need it (onkeyup, on submit, whatever).

Note... this script was directly written as an answer so it may need a few tweaks.

Upvotes: 1

Related Questions