Проверочные формы с внешним JS файлом - PullRequest
Новая
       0

Проверочные формы с внешним JS файлом

0 голосов
/ 09 марта 2020

Я пытаюсь использовать внешний файл JS для проверки некоторых форм. Я просто пытаюсь изменить цвета полей, если они оставлены пустыми. Я не могу заставить мой файл JS работать с файлом HTML. При отправке пустых полей страница просто остается прежней. Мне просто нужно, чтобы это поле оставалось пустым, а взамен возвращалось красным цветом на пустые поля.

Вот мой HTML файл: 

<html>
<head lang="en">
   <meta charset="utf-8">
   <title>Form + JavaScript</title>
   <link rel="stylesheet" href="lab6_problem1.css" />
   <script type="text/javascript" src="lab6_problem1.js"></script>
</head>
<body>
<form method="get" action="" id="mainForm" onsubmit="return validateForm()">
   <fieldset>
      <legend>Photo Details</legend>
      <table>
         <tr>
            <td colspan="2">
               <p>
               <label>Title</label><br/>
                  <input type="text" name="title" size="80" class="required" />
               </p>
               <p>
               <label>Description</label><br/>
                  <textarea name="description" rows="5" cols="61" class="required"></textarea>
               </p>            
            </td>
         </tr>
         <tr>
            <td> 
               <p> 
               <label>Continent</label><br/>
               <select name="continent">
                  <option>Choose continent</option> 
                  <option>Africa</option>
                  <option>Asia</option>
                  <option>Europe</option>
                  <option>North America</option>
                  <option>South America</option>
               </select>
               </p>
               <p> 
               <label>Country</label><br/>
               <select name="country">
                  <option>Choose country</option> 
                  <option>Canada</option>
                  <option>Mexico</option>
                  <option>United States</option>
               </select>
               </p>
               <p>  
               <label>City</label><br/>               
               <input type="text" name="city" list="cities"  size="40"/>
               <datalist id="cities">
                  <option>Calgary</option>                
                  <option>Montreal</option>
                  <option>Toronto</option>                  
                  <option>Vancouver</option>
               </datalist>
               </p>
            </td>
            <td>
               <div class="box">
                  <label>Copyright? </label><br/>
                  <input type="radio" name="copyright" value="1">All rights reserved<br/>
                  <input type="radio" name="copyright" value="2" checked>Creative Commons<br/>
               </div>
               <div class="box">
                  <label>Creative Commons Types </label><br/>
                  <input type="checkbox" name="cc" >Attribution <br/>
                  <input type="checkbox" name="cc" >Noncommercial <br/>    
                  <input type="checkbox" name="cc" >No Derivative Works <br/>  
                  <input type="checkbox" name="cc" >Share Alike
               </div>               
            </td>
         </tr>
         <tr>
            <td colspan="2" >
            <div class="rectangle"> 
               <label>I accept the software license</label>
               <input type="checkbox" name="accept" class="required">
            </div>
            </td>
         </tr>
         <tr>
            <td>
                  <p>
                  <label>Rate this photo: <br/>
                  <input type="number" min="1" max="5" name="rate" />  
                  </p>                  
                  <p>
                  <label>Color Collection: <br/>
                  <input type="color"  name="color" />   
                  </p>                  
            </td>
            <td>
               <div class="box">
                  <p>
                  <label>Date Taken: <br/>
                  <input type="date"  name="date" />   
                  </p>
                  <p>
                  <label>Time Taken: <br/>
                  <input type="time"  name="time" />   
                  </p>                  
               </div>
            </td>
         </tr>
         <tr>
            <td colspan="2">
               <div class="rectangle centered"> 
                  <input type="submit" class="rounded"> <input type="reset" value="Clear Form" class="rounded">  
               </div>
            </td>
         </tr>
      </table>
   </fieldset>
</form>
</body>
</html>

Вот мой JS файл: 

function validateForm() {
var requiredField = document.getElementByClassName("required")
var mainForm = document.getElementById("mainForm");
    document.getElementById("mainForm").onsubmit = function(e){
        var titleField = requiredField[0].value;
        var descriptionField = requiredField[1].value;
        var checkboxField = requiredField[2];

        if(titleField === ""){
            requiredField[0].parentNode.style.backgroundColor= "red";
            requiredField[0].style.backgroundColor= "red";
            e.preventDefault();
        }

        if(descriptionField === ""){
            requiredField[1].parentNode.style.backgroundColor= "red";
            requiredField[1].style.backgroundColor= "red";
            e.preventDefault();
        }

        if(checkboxField.type=="checkbox"){
            if(checkboxField.checked === false){
                requiredField[2].parentNode.style.backgroundColor= "red";
                e.preventDefault();
            }
        }
    }
}

Ответы [ 2 ]

0 голосов
/ 09 марта 2020

Вы даже можете запустить функцию js, если изменилось значение поля ввода или выбранный параметр.

Используйте onchange="validateForm()" в элементе select, текстовой области и элементе text html.

Это будет выглядеть для списка выбора. 

<select name="country" onchange="validateForm()">
                  <option>Choose country</option> 
                  <option>Canada</option>
                  <option>Mexico</option>
                  <option>United States</option>
 </select>
0 голосов
/ 09 марта 2020

Вы запускаете функцию validateForm при отправке формы с помощью onsubmit="return validateForm()", но она не будет выполнять вашу логику проверки c, поскольку она только добавляет другого onsubmit слушателя.

В вашем JS, позвоните validateForm напрямую и удалите onsubmit=... из тега form 

<form method="get" action="" id="mainForm">
...
function validateForm() {
   var requiredField = document.getElementByClassName("required")
   var mainForm = document.getElementById("mainForm");
   mainForm.onsubmit = function(e){
    var titleField = requiredField[0].value;
    var descriptionField = requiredField[1].value;
    var checkboxField = requiredField[2];

    if(titleField === ""){
        requiredField[0].parentNode.style.backgroundColor= "red";
        requiredField[0].style.backgroundColor= "red";
        e.preventDefault();
    }

    if(descriptionField === ""){
        requiredField[1].parentNode.style.backgroundColor= "red";
        requiredField[1].style.backgroundColor= "red";
        e.preventDefault();
    }

    if(checkboxField.type=="checkbox"){
        if(checkboxField.checked === false){
            requiredField[2].parentNode.style.backgroundColor= "red";
            e.preventDefault();
        }
    }
  }
}
validateForm() // call explicitly
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...