/    Sign up×
Bounties /Pin to ProfileBookmark

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.

to post a answer
JavaScript

6 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 &gt; 200) {
alert('Information to the organizer should be a maximum of 200 characters.');
return;
}

if ((presType2.checked || presType3.checked) &amp;&amp; !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.

Was this helpful?

Copy linkTweet thisAlerts:
@Ashley1288authorMar 25.2023 — i want to write a .js file to do this.
Copy linkTweet thisAlerts:
@Ashley1288authorMar 26.2023 — @Sempervivum can you or anyone help
Copy linkTweet thisAlerts:
@themolitorMar 28.2023 — Hi there, I updated the Davinci•003 auto-reply. Let me know if that helps at all.
@Ashley1288authorHi, It does not work. Nothing happens. In your codes you have the following 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; } WShat is &gt and &amp? /AshleyMar 28.2023
Copy linkTweet thisAlerts:
@Ashley1288authorMar 28.2023 — It works now. I did some mistakes. Sorry.
Thank you for thew help.
@themolitorExcellent! 👏Mar 28.2023
Copy linkTweet thisAlerts:
@artsemlazarchuJul 22.2023 — Thanks guys, very useful.
I now know how to make it clean
×

Success!

Help @Ashley1288 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 7.24,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ,
analytics: Fullres
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: Anonymous,
tipped: article
amount: 1000 SATS,

tipper: Anonymous,
tipped: article
amount: 1000 SATS,

tipper: @Nanditha,
tipped: article
amount: 1000 SATS,
)...