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

Question

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.

Pragnesh Khalas · Accepted Answer · 2014-02-06T12:23:35.767

1

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!');
    }
  }

edited Feb 06 '14 at 12:23

answered Feb 05 '14 at 16:44

Pragnesh Khalas

2,908
2
13
26

That working, one more problem, if the type_number is empty I can submit the form. – focusoft Feb 05 '14 at 17:43
In that case you need call new validation function on lick of submit button. Displayed answer is validate on keypress . – Pragnesh Khalas Feb 06 '14 at 08:46
I figure out how to not submit the form if the type_number is empty. Now can you give me some more help? I don't want to alert users when they write the first number. I want to alert them if the number is wrong when they submit my form. Please help, I really don't understand javascript. Look the jsfiddle http://jsfiddle.net/focusoft/2hzYQ/1/ . Thanks. – focusoft Feb 06 '14 at 11:43
Thanks for the answer, but I think there is a error, because when I put a bad number he give me the error, and when I put a good number doesn't submit the form, the form only change the name of the button from 'Confirm' to '1onfirm'. Please check http://jsfiddle.net/focusoft/hSmFS/1/ . Thanks. – focusoft Feb 06 '14 at 14:17
I got the answer on another question, I added this to your code `document.forms[0].submit();`. Thanks – focusoft Feb 06 '14 at 17:32

score 1 · Answer 2 · answered Feb 05 '14 at 16:45

1

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.

answered Feb 05 '14 at 16:45

zozo

8,230
19
79
134

The string approach (Pragnesh answer) may be better in case you don't do other stuff that use the number. – zozo Feb 05 '14 at 16:51
I'm not sure what I doing wrong but I can't make it to work. And the validation is needed on submit. Can you show me a fiddle? Thanks. – focusoft Feb 05 '14 at 16:52
Both answer are working fine (I checked your fiddle for the other 1, you inserted html tags in the js section, and you used submit at button click). You can't use the submit button when you want to validate before submitting. If you do, the data gets sent, not validated. Make a normal button, use onclick as event, then submit from js. You can get 99999999 results just googling that... in case you just hate google... here http://stackoverflow.com/questions/9855656/how-to-submit-a-form-using-javascript – zozo Feb 05 '14 at 16:54
Trying and trying, and no success! I'm not good in JavaScript, please check this http://jsfiddle.net/focusoft/69vPg/3/ and tell me what is not correct there. Thanks. – focusoft Feb 05 '14 at 17:29
So many things were not correct there. Also you edited your question, and used markup from edited question instead of the markup it was in your original one. You can't expect that to work. Damn it... edits were not saved. Basically... use "button" instead of "submit" at button type, correct your inputs endings (/>), remove the object definition, and instead of comparing with numbers[type] compare with type directly. Then at least take time to change ids... come on... you can spot that from an airplane. – zozo Feb 05 '14 at 17:45

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

2 Answers2