JavaScript-formulärvalidering


Innehållsförteckning

    Visa innehållsförteckning


JavaScript-formulärvalidering

HTML-formulärvalidering kan göras med JavaScript.

Om ett formulärfält (fname) är tomt, varnar den här funktionen ett meddelande och returnerar falskt, för att förhindra att formuläret skickas:

JavaScript-exempel

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

Funktionen kan anropas när blanketten skickas in:

Exempel på HTML-formulär

<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" 
method="post">
 Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

Prova själv →

<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
  let x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("Name must be filled out");
    return false;
  }
}
</script>
</head>
<body>

<h2>JavaScript Validation</h2>

<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
  Name: <input type="text" name="fname">
  <input type="submit" value="Submit">
</form>

</body>
</html>

JavaScript kan validera numerisk inmatning

JavaScript används ofta för att validera numerisk inmatning:

Ange ett tal mellan 1 och 10

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Validation</h2>

<p>Please input a number between 1 and 10:</p>

<input id="numb">

<button type="button" onclick="myFunction()">Submit</button>

<p id="demo"></p>

<script>
function myFunction() {
  // Get the value of the input field with id="numb"
  let x = document.getElementById("numb").value;
  // If x is Not a Number or less than one or greater than 10
  let text;
  if (isNaN(x) || x < 1 || x > 10) {
    text = "Input not valid";
  } else {
    text = "Input OK";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>

</body>
</html> 


Automatisk HTML-formulärvalidering

HTML-formulärvalidering kan utföras automatiskt av webbläsaren:

Om ett formulärfält (fname) är tomt, förhindrar attributet required att detta formulär lämnats:

Exempel på HTML-formulär

<form action="/action_page.php" method="post">
  <input type="text" name="fname" required>
	<input type="submit" value="Submit">
</form>

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Validation</h2>

<form action="/action_page.php" method="post">
  <input type="text" name="fname" required>
  <input type="submit" value="Submit">
</form>

<p>If you click submit, without filling out the text field,
your browser will display an error message.</p>

</body>
</html>

Automatisk HTML-formulärvalidering fungerar inte i Internet Explorer 9 eller tidigare.


Datavalidering

Datavalidering är processen för att säkerställa att användarinmatning är ren, korrekt och användbar.

Typiska valideringsuppgifter är:

  • har användaren fyllt i alla obligatoriska fält?

  • har användaren angett ett giltigt datum?

  • har användaren skrivit in text i ett numeriskt fält?

Oftast är syftet med datavalidering att säkerställa korrekt användarinmatning.

Validering kan definieras med många olika metoder och användas i många olika sätt.

Verifiering på serversidan utförs av en webbserver efter att indata har skickats till server.

Verifiering på klientsidan utförs av en webbläsare innan indata skickas till en webbserver.


HTML-begränsningsvalidering

HTML5 introducerade ett nytt HTML-valideringskoncept som heter constraint validering.

HTML-begränsningsvalidering baseras på:

  • Begränsningsvalidering HTML Indataattribut

  • Begränsningsvalidering CSS Pseudo Selectors

  • Begränsningsvalidering DOM-egenskaper och metoder


Constraint Validering HTML Input Attribut

disabled

Anger att inmatningselementet ska inaktiveras

max

Anger det maximala värdet för ett inmatningselement

min

Anger minimivärdet för ett inmatningselement

pattern

Anger värdemönstret för ett inmatningselement

required

Anger att inmatningsfältet kräver ett element

type 

Anger typen av ett inmatningselement

För en fullständig lista, gå till HTML Inmatningsattribut.


Constraint Validation CSS Pseudo Selectors

:disabled

Väljer indataelement med attributet "disabled" specificerat

:invalid

Väljer indataelement med ogiltiga värden

:optional

Väljer indataelement som inte har angett något "obligatoriskt" attribut

:required

Väljer indataelement med attributet "required" specificerat

:valid

Väljer indataelement med giltiga värden

För en fullständig lista, gå till CSS Pseudoklasser.