Walidacja formularza

Question

Witam,

 

W jaki sposób zatrzymać przesyłanie danych z formularza, kiedy nie są spełnione warunki walidacji?

 

Próbowałem return false; , ale nie daje to rezultatu.

Answer 1

if (e.preventDefault()) { e.preventDefault(); }
else if (window.event) {window.event.returnValue = false;} //For IE 8

return false; //dla środowiska nie obsługującego ww. rozwiązań, ale pamiętaj,
              // że return false musi być na samym końcu funkcji obsługującej onsubmit

 

Comments

function validateForm() {
    var checkFirstName = document.querySelector("#first-name")
    var checkLastName = document.querySelector("#last-name")
    var checkEmail = document.querySelector("#e-mail")
    var checkMessage = document.querySelector("#message")
    var checkPolicy = document.querySelector("#policy")

    if (checkFirstName.value == "") {
        checkFirstName.classList.add("error");
        document.querySelector("#first-name-label-error").innerHTML = "(Wymagane!)";
        return false;
    } else if (checkFirstName.value !== "") {
        checkFirstName.classList = ""
        document.querySelector("#first-name-label-error").innerHTML = ""
    }


    if (checkLastName.value == "") {
        checkLastName.classList.add("error")
        document.querySelector("#last-name-label-error").innerHTML = "(Wymagane!)"
        return false;
    } else if (checkLastName.value !== "") {
        checkLastName.classList = ""
        document.querySelector("#last-name-label-error").innerHTML = ""
    }


    if (checkEmail.value == "") {
        checkEmail.classList.add("error")
        document.querySelector("#email-name-label-error").innerHTML = "(Wymagane!)"
        return false;
    } else if (checkEmail.value !== "") {
        checkEmail.classList = ""
        document.querySelector("#email-name-label-error").innerHTML = ""
    }

    if (checkMessage.value == "") {
        checkMessage.classList.add("error")
        document.querySelector("#message-name-label-error").innerHTML = "(Wymagane!)"
        return false;
    } else if (checkMessage.value !== "") {
        checkMessage.classList = ""
        document.querySelector("#message-name-label-error").innerHTML = ""
    }

    if (checkPolicy.checked == false) {
        document.querySelector("#policy-name-label-error").innerHTML = "(Wymagane!)"
        checkPolicy.classList.add("error")

        return false;
    } else if (checkPolicy.checked == true) {
        document.querySelector("#policy-name-label-error").innerHTML = ""
    }


}

document.addEventListener("submit", function() {
    validateForm();
})

 

 

Jak tutaj to zastosować?

Answer 2

Dodajesz atrybut required do pola formularza? Rozwiązanie jest bardzo dobrze wspierane i często zastępuje JSa w dużym stopniu.

Comments

Niestety w tym wypadku muszę zastosować JS (wersja na zajęcia ;) )

Answer 3

Zacznijmy od tego żebyś do każdego wymaganego inputu dodał atrybuta data-error i pobrał to tak:

var form = document.querySelector("#myForm"),
    fields = form.querySelectorAll("[data-error]");

później stwórz sobie funkcje odpowiedzialne za walidację np.

function isNotEmpty(field){
    return field.value!=="";
}

później stwórz funkcję, która wyświetli komunikaty o błędach np. tak:

function showErrors(errors){

    var ul = document.querySelector("ul.errors");
    if(!ul){
        ul = document.createElement("ul");
        ul.classList.add("errors");

    }

    ul.innerHTML = "";

    errors.forEach(function(error){
        var li = document.createElement("li");
        li.textContent = error;
        ul.appendChild(li);
    });
    form.parentNode.insertBefore(ul, form);
}

następnie przypisujesz zdarzenie submit i robisz coś takiego:

form.addEventListener("submit", function(e){

    e.preventDefault();

      var  errors = [];

    for(var i=0; i<fields.length; i++){
        var field = fields[i],
              isValid = true;

        if(field.type === "text"){
            isValid = isNotEmpty(field);
        }

        if(field.type=="select-one"){
         isValid = isNotEmpty(field);
        }

tu możesz dać więcej typów do spraawdzenia i całość kończysz tak:

  if(!isValid){
            field.classList.add("error");
            errors.push(field.dataset.error);
        } else{
            field.classList.remove("error");
        }
    }
      if(errors.length){
          showErrors(errors);

        } else{
            form.submit();
        }
}, false);

 

na koniec łączysz wszystko w całość i mi stawiasz piwo :)

 

a i bym zapomniał, inputy w formularzu mają wyglądać tak:

<input type="text"  data-error="Podaj imię i nazwisko">

 

Answer 4

<!DOCTYPE html>
<html>
<head>
	<title>Walidacja Formularzy - Jquery</title>
	<meta charset="utf-8">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#formularz").validate();
		})
		

		
	</script>
</head>
<body>

	<form id="formularz" enctype="text/plain" action="mailto:nauka@gmail.com" method="post">
		<b><font size="4">Dane osobowe:</font><br><br>
		Nazwisko:
		<input id="nazw" name="nazw" value="" size="40" class="required" minlength="3"><br><br>
		Imie:
		<input id="imie" name="imie" value="" size="40" class="required" minlength="3"><br><br><!--requied połączony jest z validation jquery-->
		Zawód:
		<input id="zawod" name="zawod" value="" size="40" class="required" minlength="3"><br><br>
		Email:
		<input id="email" name="email" value="" size="40" class="required email"><br><br>
		<input type="submit" value="wyślij">

	</form>

</body>
</html>