Блог

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

Теперь, когда я связываю другой скрипт, который является FormValidation, он не работает, и я предполагаю, что я хорошо выполняю проверку формы. Я начинаю делать это так, чтобы у него была только одна проверка, но она не работает.

В чем может быть проблема? Когда я писал проверку формы в файле сценария, она переопределяла функцию или выбор, поэтому она не работала. Я не знаю, как еще выполнить проверку формы, потому что я новичок в JS, и мне не разрешено использовать jquery или что-то еще.

Спасибо

Вот ручка кода:

https://codepen.io/yomiram/pen/abNMaMy

HTML :

 <section id="formSection">
    <span class="textForm">Formulario</span>
    <hr>

    <form action="/" id="form" action="GET">
        <div class="form-group">
            <input type="text" placeholder="Nombre" id="name" class="input-control" required/>
            <input type="text" placeholder="Apellido" id="lastName" class="input-control" />
          </div>
        
          <div class="form-group">
            <input type="email" placeholder="E-mail" id="email" class="input-control" required/>
          </div>
        
          <div class="form-group">
            <select class="input-control" style="flex: 6" id="dpto" required>
                <option selected="selected" class="department">Departamento</option>
            </select>
            <select class="input-control" placeholder="Localidad" id="location" style="flex:6" required>
                <option selected="selected" class="department">Localidad</option>
            </select> 
          </div>

          <div class="form-group">
            <input type="number" id="ci" class="input-control" placeholder="C.I" style="flex:6" required/>
          </div>

          <div class="form-group">
            <input type="checkbox" name="conditions" id="conditions" required>
            <label for="conditions" id="conditions"> Acepto las bases y condiciones</label><br>
          </div>
          <div class="form-group">
            <input type="submit" id="formButton" class="formButton" value="Enviar">
        
          </div>
    </form>
</section>
  

СКРИПТ JS (ФУНКЦИЯ ВЫБОРА):

// ОТОБРАЖЕНИЕ ДАННЫХ В SELECT

 var dptosLocs = {
    "Artigas":["Artigas"," Bella Unión"],
    "Canelones":["Canelones"," Santa Lucía"],
    "Montevideo":["Montevideo"],
    "Salto":["Salto"," Daymán"," Arapey"]
};

var sel = document.getElementById('dpto');
var fragment = document.createDocumentFragment();

Object.keys(dptosLocs).forEach(function(dptosLoc, index) {
    var opt = document.createElement('option');
    opt.innerHTML = dptosLoc;
    opt.value = dptosLoc;
    fragment.appendChild(opt);
});

sel.appendChild(fragment);

document.getElementById("dpto").onchange = function() {defineDpto()};

function defineDpto() {
  var dpto = document.getElementById("dpto").value;

  if (dpto == "Artigas" ) {
    var sel = document.getElementById('location');
    var fragment = document.createDocumentFragment();

  Object.values(dptosLocs["Artigas"]).forEach(function(dptosLoc, index) {
    var opt = document.createElement('option');
    opt.innerHTML = dptosLoc;
    opt.value = dptosLoc;
    fragment.appendChild(opt)

    sel.appendChild(fragment);
}); 

  } else if (dpto == "Canelones") {
      document.getElementById('location').options.length = 0;

      var sel = document.getElementById('location');
      var fragment = document.createDocumentFragment();
    
      Object.values(dptosLocs["Canelones"]).forEach(function(dptosLoc, index) {
      var opt = document.createElement('option');
      opt.innerHTML = dptosLoc;
      opt.value = dptosLoc;
      fragment.appendChild(opt)

      sel.appendChild(fragment);
  });

  } else if (dpto == "Montevideo") {
      document.getElementById('location').options.length = 0;

      var sel = document.getElementById('location');
      var fragment = document.createDocumentFragment();
    
      Object.values(dptosLocs["Montevideo"]).forEach(function(dptosLoc, index) {
      var opt = document.createElement('option');
      opt.innerHTML = dptosLoc;
      opt.value = dptosLoc;
      fragment.appendChild(opt)

      sel.appendChild(fragment);
  });
  } else if (dpto == "Salto") {
      document.getElementById('location').options.length = 0;

      var sel = document.getElementById('location');
      var fragment = document.createDocumentFragment();
    
      Object.values(dptosLocs["Salto"]).forEach(function(dptosLoc, index) {
      var opt = document.createElement('option');
      opt.innerHTML = dptosLoc;
      opt.value = dptosLoc;
      fragment.appendChild(opt)

      sel.appendChild(fragment);
  });
  }
}
  

ПРОВЕРКА ФОРМЫ:

 function validar (){
  var name, lastName, email, dpto, location, ci, condictions, expresion;

  name = document.getElementById('name').value;
  lastName = document.getElementById('lastName').value;
  email = document.getElementById('email').value;
  dpto = document.getElementById('dpto').value;
  location = document.getElementById('location').value;
  ci = document.getElementById('ci').value;
  conditions = document.getElementById('conditions').value;

  if (name === ""){
    alert("El campo nombre está vacío");
  }
}
  

Проблема с вашим скриптом заключается в том, что функция validar() никогда не вызывается. Пожалуйста, помните, что если вы пишете функцию и никогда не вызываете ее в своем коде, она никогда не будет выполнена. Что вам нужно сделать, так это добавить вызов вашей функции validar() в событие onsubmit формы.

 <form action="/" id="form" action="GET" onsubmit="return validar();">
  

И ваша функция validar() должна возвращать false, если проверка не проверена для формы.

 if (name === ""){
    alert("El campo nombre está vacío");
    return false;
}
return true;
  

Вам следует взглянуть на то, как вызываются события в javascript при работе с формами.

Вы пропускаете вызов validar функции

 <form .... onsubmit="return validar()">
  

Также validar должно возвращать false, если проверка завершилась неудачно, и true, если она прошла