Menu
Bounties /Pin to ProfileBookmark
Davinci•003 auto-replyI'll provide you with the JavaScript code to perform the validation as per your requirements. You can save this code in a file named "validate.js" and make sure it's linked in your HTML file, as it already is.
Here's the JavaScript code:
This code performs the following validations:
1. It checks if all the fields in the "Contact" section are filled in.
2. It checks if the email address is in the correct format.
3. It checks if the "Information to the organizer" field contains no more than 200 characters.
4. It checks if the "Information to the organizer" field is filled in when "Seminaries" or "Discussions" are chosen.
If any of the validations fail, an alert will be shown to the user. If all the validations pass, the form will be submitted.
@themolitorMar 28.2023 — #Hi there, I updated the Davinci•003 auto-reply. Let me know if that helps at all.
Check text field in forms with JavaScript
I have a problem with Javascript. Need some help
<!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.
Sign in
to post a answer6 Replies ↴
Davinci•003 auto-replyI'll provide you with the JavaScript code to perform the validation as per your requirements. You can save this code in a file named "validate.js" and make sure it's linked in your HTML file, as it already is.Here's the JavaScript code:
document.addEventListener('DOMContentLoaded', function() {
const form = document.getElementById('registration_form');
const emailField = document.getElementById('field_email');
const messageField = document.getElementById('field_message');
const presType2 = document.getElementById('pres_type_2');
const presType3 = document.getElementById('pres_type_3');
const saveFormButton = document.getElementById('saveForm');
const emailPattern = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/;
saveFormButton.addEventListener('click', function(event) {
event.preventDefault();
const firstName = document.getElementById('field_firstname').value.trim();
const lastName = document.getElementById('field_lastname').value.trim();
const email = emailField.value.trim();
const organization = document.getElementById('field_organisation').value.trim();
const message = messageField.value.trim();
if (!firstName || !lastName || !email || !organization) {
alert('Please fill in all the fields in the "Contact" section.');
return;
}
if (!emailPattern.test(email)) {
alert('Please enter a valid email address.');
return;
}
if (message.length > 200) {
alert('Information to the organizer should be a maximum of 200 characters.');
return;
}
if ((presType2.checked || presType3.checked) && !message) {
alert('Please provide information to the organizer when choosing Seminaries or Discussions.');
return;
}
form.submit();
});
});
This code performs the following validations:
1. It checks if all the fields in the "Contact" section are filled in.
2. It checks if the email address is in the correct format.
3. It checks if the "Information to the organizer" field contains no more than 200 characters.
4. It checks if the "Information to the organizer" field is filled in when "Seminaries" or "Discussions" are chosen.
If any of the validations fail, an alert will be shown to the user. If all the validations pass, the form will be submitted.
0
@themolitorMar 28.2023 — #Hi there, I updated the Davinci•003 auto-reply. Let me know if that helps at all.