Как добавить проверку формы с помощью JavaScript? - PullRequest
Новая
       8

Как добавить проверку формы с помощью JavaScript?

0 голосов
/ 24 октября 2019

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

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

--- сокращенная форма (html) --- 

<form id="thisForm" method="post" name="thisForm" onsubmit="validForm()">
<label>First name:</label> <input autocomplete="on" id="firstNameInput" placeholder="John" required="" title="Enter your first name" type="text"><br>
<label>Last name:</label> <input autocomplete="on" id="lastNameInput" placeholder="Smith" required="" title="Enter your last name" type="text"><br>
<label>Age:</label> <input autocomplete="on" id="ageInput" placeholder="18" required="" title="Enter your age" type="number"><br>
<label>Email address:</label> <input autocomplete="on" id="emailInput" placeholder="johnsmith@gmail.com" required="" title="Enter your email address" type="email">
<button class="button button1" id="submit" onsubmit="loopForm(form)">Confirm Booking</button>
<button class="button button2" id="reset" onclick="index.html">Reset</button>
</form>

--- сокращенный javascript --- 

function validForm() {
  var x = document.forms["myForm"]["numberOfDays"].value;
  if (x == "") {
    alert("Name must be filled out");
    return false;
  }
}

function loopForm(form) { //this function is called once the confirm button is clicked, sends data to firebase
    alert('Test alert for confirm booking');
    var amountOfDays = numberOfDays.value;
    var insuranceFee = 20;
    var BOOKINGFEE = 50;
    var sum = 0 ;
    var cbResults = ' ';
    for (var i = 0; i < form.elements.length; i++) {
        if (form.elements[i].type == 'radio') {
            if (form.elements[i].checked == true) {
                vehicleResult = form.elements[i].value;
                vehicleCost = form.elements[i].dataset.price;
                insuranceCost = Math.round(insuranceFee + vehicleCost * amountOfDays);
                //ouputs
                outputDays.innerHTML = amountOfDays; //working
                outputTest.innerHTML = insuranceCost; //wrong but working
                outputVehicle.innerHTML = vehicleResult; //working
            }
        }
        if (form.elements[i].type == "checkbox") {
            if (form.elements[i].checked == true) {
                cbResults += form.elements[i].value + ', ';
                sum = sum + parseInt(form.elements[i].dataset.price);
                alert(cbResults + "$" + sum);
                outputExtras.innerHTML = cbResults;
                totalCost = Math.round(insuranceCost + sum + BOOKINGFEE); //devired values
                outputCost.innerHTML = '$' + totalCost;
            }
        }
    }
}

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

Ответы [ 2 ]

1 голос
/ 24 октября 2019

В вашей функции validForm вы пытаетесь получить доступ к форме (myForm), а также к полю ввода (numberOfDays), оба из которых не существуют в вашем HTML-коде, это вызовет ошибку.

вместо 

var x = document.forms["myForm"]["numberOfDays"].value;

используйте 

var form = document.forms["thisForm"]; //will return form

и в HTML-коде присвойте каждому полю ввода уникальное имя для доступа к нему с помощью form объекта.

Я дал каждому полю ввода имя, чтобы вы могли получить доступ к его значению, используя его имя, например, для доступа к имени, используйте form.fName.value.

Я обновил ваш HTML-код кака также ваша функция проверки 

function validForm() {
    var form = document.forms["thisForm"]
    var fName = form.fName.value;
    var lName = form.lName.value;
    var age =form.age.value;
    var email = form.email.value;
    if (fName == "") {
        alert("First name must be filled out");
        return false;
    }
    if (lName == "") {
        alert("Last name must be filled out");
        return false;
    }
    if (age == "") {
        alert("age must be filled out");
        return false;
    }
    if (email == "") {
        alert("email must be filled out");
        return false;
    };
    
    //call your next function here
    //loopForm(form);
}
<form id="thisForm" method="post" name="thisForm" onsubmit="return validForm()">
      <label>First name:</label>
      <input name="fName" autocomplete="on" id="firstNameInput" placeholder="John"  title="Enter your first name" type="text"><br>

      <label>Last name:</label>
      <input name="lName" autocomplete="on" id="lastNameInput" placeholder="Smith" title="Enter your last name" type="text"><br>

      <label>Age:</label>
      <input name="age" autocomplete="on" id="ageInput" placeholder="18"  title="Enter your age" type="number"><br>

      <label>Email address:</label>
      <input name="email" autocomplete="on" id="emailInput" placeholder="johnsmith@gmail.com"  title="Enter your email address" type="email">

      <button class="button button1" id="submit" >Confirm Booking</button>

      <button class="button button2" id="reset" onclick="index.html">Reset</button>
</form>
0 голосов
/ 24 октября 2019

Вы можете сделать одну функцию для выполнения вашего действия, переместив ваш код validform в функцию loopform. Если форма не верна, верните false что-то вроде функции ниже. 

function loopForm(form) { 
    var x = document.forms["myForm"]["numberOfDays"].value;
    if (x == "") 
     {
       alert("Name must be filled out");
        return false;
     }
    alert('Test alert for confirm booking');
    var amountOfDays = numberOfDays.value;
    var insuranceFee = 20;
    var BOOKINGFEE = 50;
    var sum = 0 ;
    var cbResults = ' ';
    for (var i = 0; i < form.elements.length; i++) {
        if (form.elements[i].type == 'radio') {
            if (form.elements[i].checked == true) {
                vehicleResult = form.elements[i].value;
                vehicleCost = form.elements[i].dataset.price;
                insuranceCost = Math.round(insuranceFee + vehicleCost * amountOfDays);

                outputDays.innerHTML = amountOfDays; 
                outputTest.innerHTML = insuranceCost; 
                outputVehicle.innerHTML = vehicleResult; 
            }
        }
        if (form.elements[i].type == "checkbox") {
            if (form.elements[i].checked == true) {
                cbResults += form.elements[i].value + ', ';
                sum = sum + parseInt(form.elements[i].dataset.price);
                alert(cbResults + "$" + sum);
                outputExtras.innerHTML = cbResults;
                totalCost = Math.round(insuranceCost + sum + BOOKINGFEE); //devired values
                outputCost.innerHTML = '$' + totalCost;
            }
        }
    }

return true;
}
...