Check forms With JavaScript

Joined
Mar 27, 2023
Messages
18
Reaction score
1
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
<!--[if lte IE 8]>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/build/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/build/grids-responsive-min.css">
<!--<![endif]-->
<link rel="stylesheet" href="style/form.css">
</head>

<body>

<div class="content">
<h1>Booking</h1>
<p>Please fill in the contract form and send it for booking..</p>
<form id="registration_form" class="pure-form pure-form-stacked" enctype="multipart/form-data" method="post" action="test.html">
<fieldset>
<legend>Contact</legend>
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-2">
<label for="field_firstname">Firstname</label>
<input type="text" id="field_firstname" name="field_firstname" class="pure-u-23-24" tabindex="1">
</div>
<div class="pure-u-1 pure-u-md-1-2">
<label for="field_lastname">Lastname</label>
<input type="text" id="field_lastname" name="field_lastname" class="pure-u-23-24" tabindex="2">
</div>
<div class="pure-u-1 pure-u-md-1-2">
<label for="field_email">E-mail</label>
<input type="text" id="field_email" name="field_email" class="pure-u-23-24" tabindex="3">
</div>
<div class="pure-u-1 pure-u-md-1-2">
<label for="field_organisation">Organisation</label>
<input type="text" id="field_organisation" name="field_organisation" class="pure-u-23-24" tabindex="4">
</div>
</div>
</fieldset>
<fieldset>
<legend>Types of presentations</legend>
<label for="pres_type_1" class="pure-radio">
<input type="radio" id="pres_type_1" name="pres_type" value="lecture" tabindex="5" checked> Lectures
</label>
<label for="pres_type_2" class="pure-radio">
<input type="radio" id="pres_type_2" name="pres_type" value="seminar" tabindex="6"> Seminaries
</label>
<label for="pres_type_3" class="pure-radio">
<input type="radio" id="pres_type_3" name="pres_type" value="discussion" tabindex="7"> Discussions
</label>
<label for="field_pres_title">Title for lecture/seminarie</label>
<input type="text" id="field_pres_title" name="field_pres_title" class="pure-u-23-24" tabindex="8">
</fieldset>
<fieldset>
<legend>Other information</legend>
<label for="field_message">Information to the organizer (max 200 characters)</label>
<textarea id="field_message" name="field_message" cols="50" rows="4" class="pure-u-23-24" tabindex="9"></textarea>
</fieldset>
<button type="submit" id="saveForm" name="saveForm" class="pure-button pure-button-primary" tabindex="10">Send request</button>
</form>
</div>
<!--END .content-->
<script src="scripts/validate.js"></script>
</body>

</html>



I want to do some form control. Want to check if the entered data are in the correct form.

The section “Contact” section must be completely filled in.

E mail adress in a correct format

This filed “Information to the organizer (max 200 characters)” is not reqiured. But if used, the maximum characters are max 200 charactwers.

When the tickboxes Seminaries or Discussions are choosen the “Information to the organizer (max 200 characters)” must be entered.

I want to have a .js file to do this.

I found something, like this (do not understand it realy)

var pattern = /^([a-zA-Z0-9_.-])+@([a-zA-Z0-9_.-])+\.([a-zA-Z])+([a-zA-Z])+/;
var isValid = pattern.test(email);
Can anyone help me out? PLEASE, with codes. Js is totaly new for me.
 
Joined
Sep 4, 2022
Messages
129
Reaction score
16
look at HTML 5 for 'input and its attributes',
by HTML 5 , you can integrate 'filters', 'placeholders','types' of input field, it's really useful


it's really making easy 'forms and inputs' ( without JS ) :

here is the link :: w3school
--------------------------------------------------
about var pattern ( your questions ) :

it's a 'regular expression pattern' which check if the String is a mail address.
if yes return true ... if no return false.

  • the 'whole pattern' is between / and /
  • 'sub set' are between '(' and ')' ; there are 4 sub sets define in the reg exp.
  • + indicates it could have more than one character in the 'sub set'

when you have [a-zA-Z0-9_.-] , it's to check if all characters is in ascii from "a minus" to "Z capital" and also numbers from 0 to 9, adding to the sub set the _ , the . , the -

it's not a 'basic string', it's parameters for the 'regular expression engine'

more in this reference link : reg exp in details
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,792
Messages
2,569,639
Members
45,353
Latest member
RogerDoger

Latest Threads

Top