VPF::Javascript validation - Форум программистов

bidoerr

Дата 20.5.2011, 15:28 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 2
Регистрация: 20.5.2011

Репутация: нет
Всего: нет

У меня небольшая проблема...яваскрипт валидация работает только на последний вопрос и я не могу понять почему на остальные не работает...Кто-нибудь знает в чём проблема и её решение?

Это код страницы с вопросами :

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
<script type="text/javascript" src="script.js"></script>



<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Questionaire</title>
<link href="oneColLiqCtrHdr19.css" rel="stylesheet" type="text/css" />

<style type="text/css">
<!--
body {
    background-color: #FFF;
    background-image: url(images/aa.jpg);
}
-->
</style></head>

<body class="oneColLiqCtrHdr">
<div id="container">
<div id="header">
    <h1>&nbsp;</h1></div>

    
      <!-- forms -->
      
      
      
  <form action="http://projects.knord.dk/interaction/saveforminfo.aspx" method="post" onsubmit="return checkform(this);" >
      
  <input type="hidden" name="surveyid" value="knjuku2" />
  <input type="hidden" name="usecookie" value="true" />
  <input type="hidden" name="landingpage" value="http://---.html" />  
  
<p align="center"><b>This survey was made for Business Academy Copenhagen North project not for FDIM.</b></p>
   <p>

 <b>Please enter your personal information</b>
  
    </p>
   <p><b>Your Occupation:</b>
     <input type="text" name="occupation" />
    </p>
   <p><b>Age Group:</b> 
     <select name="age">
       <option value="under 18">less then 18</option>
       <option value="18-25">18-25</option>
       <option value="26-35">26-35</option>
       <option value="over 35">more then 35</option>
     </select>
     
    </p>
   <p><b>Status:</b> 
     <select name="status">
       <option value="single">Single</option>
       <option value="single with children">Single with children</option>
       <option value="in relationship">In relationship</option>
       <option value="married">Married</option>
       <option value="divorced">Divorced</option>
     </select>
    </p>
   <p><b>Gender:</b>
     <input type="radio" name="gender" value="male" /> Male
     <input type="radio" name="gender" value="female" /> Female
     
    </p>
   <p><b>Do you have a job?</b> 
     <input type="radio" name="job" value="yes" />Yes
     <input type="radio" name="job" value="no" />No  
     
   </p>
   <p>&nbsp;</p>
      <p>
        <!-- 1 vopros -->
</p>
      <p><b>1. Why do You use online social media?</b>
        
        
        </p>
    <p>
      <input type="radio" name="bla" value="To chat with friends" /> 
      To chat with friends<br></br>
      <input type="radio" name="bla" value="To read news" /> To read news<br></br>
      <input type="radio" name="bla" value="To write blogs" /> To write blogs<br></br>
      <input type="radio" name="bla" value="Other" /> Other<br></br>
      
    </p>
    <p>
      <!-- 2 vopros -->
          
      <b>2. What online social media do You use more often?</b>
    </p>
       
    <p>&nbsp; </p>
    <p>
      <select name="more">
            
            <option value="MySpace">MySpace</option>
            <option value="Twitter">Twitter</option>
            <option value="Facebook">Facebook</option>
            <option value="LinkedIn">LinkedIn</option>
      </select>   
    </p>
    <p>&nbsp;</p>       
        
        <!-- 3 vopros -->
                             
          <b>3. When do You use it?</b>
    <p>
        <input type="radio" name="use" value="1" /> At home<br></br>
        <input type="radio" name="use" value="2" /> At work<br></br>
        <input type="radio" name="use" value="3" /> At school<br></br>
        <input type="radio" name="iuse" value="4" /> In the bus/train<br></br>
        <input type="radio" name="use" value="5" /> Other<br></br>
       
    </p>
        <p><b>4. How much hours approximately do You spend on social media?</b>
        </p>
          <select name="hours">
           
            <option value="less than 2 hours">less than 2 hours a day</option>
            <option value="2-4 hours">2-4 hours a day</option>
            <option value="4-8 hours">4-8 hours a day</option>
            <option value="8-12 hours">8-12 hours a day</option>
            <option value="more than 12 hours">more than 12 hours a day</option>
          </select>   
          
      
    <p>&nbsp;</p>
         
            
            <p>
            <!-- 5 vopros -->
            
            <b>5. Do You use social media often?</b></p>
            <p>
           
            <input type="radio" name="often" value="Yes" /> 
            Yes
        <input type="radio" name="often" value="No" /> No
          
            
            <!-- 6 vopros -->
            </p>
            <p><b>6. Social Media website to which You usually upload</b></p>
    <p>
          <input type="radio" name="upload" value="Youtube" /> Youtube<br></br>
        <input type="radio" name="upload" value="Flickr" /> Flickr<br></br>
        <input type="radio" name="upload" value="Photobucket" /> Photobucket<br></br>
        <input type="radio" name="upload" value="Slideshare" /> Slideshare<br></br>
        <input type="radio" name="upload" value="Other" /> Other  
    </p>
       
          <!-- 7 vopros -->
          
        <b>7. Where do You chat with Your friends</b>
    
    <select name="chatting">
        
      <option value="Msn">Msn</option>
        <option value="Skype">Skype</option>
        <option value="Yahoo!">Yahoo!</option>
        <option value="Other">Other</option>
    </select>
    <p>&nbsp;</p>
   
    
      
      <!-- 8 vopros -->
 
  <b>8. You use social media for</b>    
    
      
      <select name="using">
        
        <option value="Personal reasons">Personal reasons</option>
        <option value="Professional reasons">Professional reasons</option>
        <option value="Don't use it">Don't use it</option>  
      </select>
      
    <p>&nbsp;</p>
 
  
  
    <p>
      <!-- 9 vopros -->
      
      <b>9. You prefer to obtain the information You need at</b>  
      
      
      <select name="information">
        
        <option value="Yahoo!">Yahoo!</option>
        <option value="Google">Google</option>
        <option value="Wikipedia">Wikipedia</option> 
        <option value="Ask">Ask</option> 
        <option value="Other">Other</option>  
      </select>
    </p>
    
      
      
      <!-- 10 vopros -->
      
      <b>10. What do You prefer to do being online</b>?
    
      
      <select id="drop" name="online">
        <option value="Read blogs">Read blogs</option>
        <option value="Chat with friends">Chat with friends</option>
        <option value="Watch videos">Watch videos</option> 
        <option value="Read news">Read news</option> 
        <option value="Other">Other</option>  
      </select>
    
    
    <!-- konec voprosov -->
    
    <!-- button-submit -->
    <p align="center">
  <input type="submit" value="Submit" />
  </p>
  </form>
<!-- end #container -->
</div>
</body>
</html>

Яваскрипт валидация :

Код


//Javascript Document

function checkform ( form )
{

  if (form.occupation.value == "") {
    alert( "Please enter your occupation." );
    form.occupation.focus();
    return false ;
  }
  return true ;
}


function checkform(f) {
  for (var i=0; i<f.elements("gender").length;
    i++) {
    var radio = f.elements("gender")[i];
    if (radio.checked) {
      return true;
    }
  }
  // no checked radio button found
  window.alert("Choose your gender!");
  f.elements("gender")[0].focus();
  return false;
}

function checkform(f) {
  for (var i=0; i<f.elements("job").length;
    i++) {
    var radio = f.elements("job")[i];
    if (radio.checked) {
      return true;
    }
  }
  // no checked radio button found
  window.alert("Choose if you have a job!");
  f.elements("job")[0].focus();
  return false;
}

function checkform(f) {
  for (var i=0; i<f.elements("bla").length;
    i++) {
    var radio = f.elements("bla")[i];
    if (radio.checked) {
      return true;
    }
  }
  // no checked radio button found
  window.alert("Answer question number 1");
  f.elements("bla")[0].focus();
  return false;
}

function checkform(f) {
  for (var i=0; i<f.elements("use").length;
    i++) {
    var radio = f.elements("use")[i];
    if (radio.checked) {
      return true;
    }
  }
  // no checked radio button found
  window.alert("Answer question number 3!");
  f.elements("use")[0].focus();
  return false;
}

function checkform(f) {
  for (var i=0; i<f.elements("often").length;
    i++) {
    var radio = f.elements("often")[i];
    if (radio.checked) {
      return true;
    }
  }
  // no checked radio button found
  window.alert("Answer question number 5!");
  f.elements("often")[0].focus();
  return false;
}

function checkform(f) {
  for (var i=0; i<f.elements("upload").length;
    i++) {
    var radio = f.elements("upload")[i];
    if (radio.checked) {
      return true;
    }
  }
  // no checked radio button found
  window.alert("Answer question number 6!");
  f.elements("upload")[0].focus();
  return false;
}

Что надо изменить, чтобы валидация работала на все вопросы?

bidoerr

Дата 21.5.2011, 02:21 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 2
Регистрация: 20.5.2011

Репутация: нет
Всего: нет

Как я понимаю мне надо скомбинировать яваскрипт, так как в этом варианте валидация срабатывает только на последний вопрос, помогите кто-нибудь разобраться.. никак не могу понять как это сделать

Котокобра

Дата 21.5.2011, 05:53 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 147
Регистрация: 26.11.2009

Репутация: нет
Всего: 4

потому что вы переопределяете функцию. шесть раз.

Код


var formElementsName = ["gender", "job", "bla", "use", "often", "upload"];
var errorMsg = ["Choose your gender!", "Choose if you have a job!", "Answer question number 1", "Answer question number 3!", "Answer question number 5!", "Answer question number 6!"];

function checkform(f) {
  if (form.occupation.value == "") {
    alert( "Please enter your occupation." );
    form.occupation.focus();
    return false ;
  }
  else {
    for(n=0; n<formElementsName.length; n++) {
      if( !checkFormElement(f, formElementsName[n], errorMsg[n]) ) return false;
    }
  }
  return true;
}


function checkFormElement(f, elName, erMsg) {
  for (var i=0; i<f.elements(eName).length; i++) {
    var radio = f.elements(eName)[i];
     if (radio.checked) {
      return true;
    }
  }
  // no checked radio button found
  alert(erMsg);
  f.elements(elName)[0].focus();
  return false;
}

Это сообщение отредактировал(а) Котокобра - 21.5.2011, 05:55

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »