Validation of forms JavaScript

Projects
#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/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
 <!--[if lte IE 8]>
 <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-old-ie-min.css">
 <![endif]-->
 <!--[if gt IE 8]><!-->
 <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/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.

#2

The code you provided is checking whether a given email address is valid or not by using a regular expression pattern. The regular expression pattern is:

/^([a-zA-Z0-9_.-])+@([a-zA-Z0-9_.-])+\.([a-zA-Z])+([a-zA-Z])+/

The ^ character at the beginning of the pattern indicates that the email address should start with the specified pattern.

([a-zA-Z0-9_.-])+ specifies that one or more characters in the email address can be either alphabets, digits, underscores, periods, or hyphens. This pattern is repeated twice, separated by the @ symbol.

The @ symbol is followed by ([a-zA-Z0-9_.-])+, which specifies that one or more characters in the domain name can be either alphabets, digits, underscores, periods, or hyphens.

\. specifies a literal period, which separates the domain name from the top-level domain name (TLD).

([a-zA-Z])+ specifies that the TLD must be one or more alphabets.

The + at the end of the pattern indicates that the previous pattern should be matched one or more times.

The test method is called on the pattern regular expression object with the email variable passed as an argument. If the email address matches the pattern, then isValid will be true, otherwise isValid will be false.