<!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.
<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.