2013-03-21 6 views
0

Я уверен, что это очень просто, но по какой-то причине я просто не могу это понять.Javascript select() value

Мне нужно создать форму на странице со следующими полями и правилами. Если пользователь отправляет форму, но правила нарушаются для любого поля, приведенное поведение должно быть сделано, чтобы сообщить пользователю. Мне не разрешено использовать jQuery. Field01 & Field02 - это одна коробка. Field03 & Field04 - это одна коробка.

  • Field01: «Username» - Rule01: не может быть пустым, Behavior01: сосредоточьтесь на нем с помощью focus().
  • Field02: «Username» - Rule02: не может быть пустым, Behavior02: предупредить пользователя о том, что «требуется имя пользователя».
  • Field03: «Birthyear» - Rule03: должно быть числовым, Behavior03: выберите значение, используя select().
  • Field04: «Birthyear» - Rule04: должно быть между 1900 - 2012, Behaviour04: Поверните цвет фона текстового поля Birthyear на желтый.

Это то, что у меня есть до сих пор ... Борьба с полемField04.

Кто-нибудь знает, как подойти к этому?

HTML:

<!DOCTYPE html> 

<html> 
    <head> 
     <script defer="defer" type="text/javascript" src="dawid_spamer_Assign01.js"></script> 

    </head> 
    <body> 

     <div id="div1"> 
      <form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post"> 
      Username: <input type="text" id="username" name="username"><br>  
      Birth Year: <input type="select" id="birthYear" name="birthYear"><br><br> 
      <input type="submit" value="Submit"> 

      </form></div> 

     <div id="div2"> 
      <img src="cat.jpg" id="im1" name="image1"/> 
      <img src="dog.jpg" id="im2" name="image2"/> 
      <img src="fish.jpg" id="im3" name="image3" class='double'/> 
     </div></body></html> 

JS в отдельном файле:

document.getElementById("username").focus(); // focus on text box 

function validateForm(){ 
var x=document.forms["myForm"]["username"].value; 
if (x==""){ 
    alert("Username Required!"); 
      // focus on text box 
    document.getElementById("username").focus(); 
    return false; // validation failed 
}else{ 
    return true; // validation success 
    } 
} 
+1

Посмотрите на [этот ответ и скрипкой] (http://stackoverflow.com/questions/15264501/live-validation-using-javascript/15273623 # 15273623) для общей схемы настройки процесса проверки (sans jQuery). –

ответ

0

Попробуйте

document.getElementById("username").focus(); // focus on text box 

function validateForm() { 
    var x = document.forms["myForm"]["username"].value; 
    if (x == "") { 
     alert("Username Required!"); 
     // focus on text box 
     document.getElementById("username").focus(); 
     return false; // validation failed 
    } 

    var dob = document.forms["myForm"]["birthYear"]; 
    var y = dob.value; 
    if(!(/^\d+$/.test(y))){ 
     alert('must be numert'); 
     dob.select(); 
     return false; 
    } 

    return true; 
} 

Демо: Fiddle

+0

Спасибо, что ваш код работал, но мне пришлось использовать isNaN. – tidydee

0

я предполагаю поле года рождения должно быть выделено, если значение при условии, не является числовым значением. Это можно сделать, используя select() Method, предоставленный JavaScript.

Используйте isNaN() Method, чтобы проверить, является ли предоставленное значение числовым.