custom message still showing after form input is filled - javascript

I'm doing a client-side form validation while setting the custom warning messages, but that same pop-up message keeps showing even when the input is filled with the name.
For example i have an input field to get the user name on the code below:
<form id="form" name="contactForm" method="post" action="php/formulario_contactos.php">
<div>
<label for="name">Your name</label>
<input type="text" id="name" name="name" required="">
</div>
<div>
<label for="mail">Your email</label>
<input type="email" id="mail" name="user_mail" required="">
</div>
<div>
<label for="topic">Select Topic</label>
<select id="topic" name="topic" required="">
<option selected disabled hidden value="">Choose a Topic</option>
<option value="link">Site Link</option>
<option value="copyright">Copyright</option>
<option value="errors">Site/Article errors</option>
<option value="feedback">Feedback</option>
<option value="other">Other</option>
</select>
</div>
<div>
<label for="msg">Your message</label>
<textarea id="msg" name="user_message" required=""></textarea>
</div>
<div class="button">
<button type="submit">Submit</button>
</div>
</form>
And i wrote the javascript code below to change the default browser error message to the one below:
var inputName = document.getElementById('name');
var form = document.getElementById('form');
form.onsubmit = validateForm();
function validateForm() {
if(inputName.value === ""){
inputName.setCustomValidity("Name is required");
return false;
} else {
inputName.setCustomValidty("");
}
}
What am i doing incorrectly?

There were two issues in your JavaScript that were causing your validation to break:
The validateForm function was running on page load, rather than when the user submits the form. I've added in a revised event handler to resolve this
A spelling error was generating an error: setCustomValidty should be setCustomValidity
The following code fixes those issues.
HTML:
<form id="form" name="contactForm" method="post" action="php/formulario_contactos.php">
<div>
<label for="name">Your name</label>
<input type="text" id="name" name="name" required="">
</div>
<div>
<label for="mail">Your email</label>
<input type="email" id="mail" name="user_mail" required="">
</div>
<div>
<label for="topic">Select Topic</label>
<select id="topic" name="topic" required="">
<option selected disabled hidden value="">Choose a Topic</option>
<option value="link">Site Link</option>
<option value="copyright">Copyright</option>
<option value="errors">Site/Article errors</option>
<option value="feedback">Feedback</option>
<option value="other">Other</option>
</select>
</div>
<div>
<label for="msg">Your message</label>
<textarea id="msg" name="user_message" required=""></textarea>
</div>
<div class="button">
<button id="submit" type="submit">Submit</button>
</div>
</form>
JavaScript:
var inputName = document.getElementById('name');
var form = document.getElementById('form');
var submitButton = document.getElementById("submit");
submitButton.onclick = function () { validateForm(); };
function validateForm() {
if(inputName.value === ""){
inputName.setCustomValidity("Name is required");
return false;
} else {
inputName.setCustomValidity("");
}
}

Related

Having Trouble with Href in form

I am trying to create a form that will give an alert if a field is empty, or if the fields are not empty then it will take the user to a new page(this page does exist) I have tried replacing 'button' with 'input', but still no hope
<div id='signupbox'>
<div class="formbox">
<h1>My first contact form</h1>
<p style="color:red;">Anything With a * is required</p>
<br>
<form name="app-form" onsubmit="return validateForm()" method="post">
<input name="Fname" id='Fname' type="text" class="feedback-input" placeholder="Fname" />
<input name="Email" id='Email' type="text" class="feedback-input" placeholder="Email" />
<select name="languages" id="lang" class="feedback-input">
<option value="javascript">Select a language</option>
<option value="javascript">JavaScript</option>
<option value="php">PHP</option>
<option value="java">Java</option>
<option value="golang">Golang</option>
<option value="python">Python</option>
<option value="c#">C#</option>
<option value="C++">C++</option>
<option value="erlang">Erlang</option>
</select>
<textarea name="Text" id='Text' class="feedback-input" placeholder="Comment"></textarea>
<button type='submit' onclick="return validateFormData(); Link();" >SUBMIT</button>
</form>
</div>
</div>
</body>
<script>
function validateForm() {
let x = document.forms["app-form"]["Fname"].value;
let y = document.forms["app-form"]["Email"].value;
if ((x == "") || (y=='')) {
alert("Required Fields Must be Filled Out.");
return false;}}
function Link(){
document.location.href = "SuccessPage.html";
}
</script>
Also oninvalid attribute does give an alert if the case is to warn the user by showing an alert:
<input
name="Fname"
id='Fname'
type="text"
class="feedback-input"
oninvalid="alert('Required Fields Must be Filled Out.!');" placeholder="Fname" />
<input
name="Email"
id='Email'
type="text"
class="feedback-input"
oninvalid="alert('Required Fields Must be Filled Out.!');" placeholder="Email" />
Check HTML oninvalid Event Attribute for detailed information.
Your onClick method is wrong. It should be this:
<button type='submit' onclick="validateFormData()" >SUBMIT</button>
In your validateFormData method you should check to make sure the form has data, if it does then you call your Link() method. If it doesn't, display an alert.
firstly, if you want a good form page, you have to prevent default behaves like page renewing thus you can have so good form validating process. I edited your code please use this.
<div id='signupbox'>
<div class="formbox">
<h1>My first contact form</h1>
<p style="color:red;">Anything With a * is required</p>
<br>
<form name="app-form" method="post">
<input name="Fname" id='Fname' type="text" class="feedback-input" placeholder="Fname" />
<input name="Email" id='Email' type="text" class="feedback-input" placeholder="Email" />
<select name="languages" id="lang" class="feedback-input">
<option value="javascript">Select a language</option>
<option value="javascript">JavaScript</option>
<option value="php">PHP</option>
<option value="java">Java</option>
<option value="golang">Golang</option>
<option value="python">Python</option>
<option value="c#">C#</option>
<option value="C++">C++</option>
<option value="erlang">Erlang</option>
</select>
<textarea name="Text" id='Text' class="feedback-input" placeholder="Comment"></textarea>
<button type='submit' id="button" >SUBMIT</button>
</form>
</div>
</div>
</body>
<script>
document.getElementById("button").addEventListener("submit", function validateForm(e) {
e.preventDefault();
let x = document.getElementById("Fname").value;
let y = document.getElementById("Email").value;
if (!x || !y) {
alert("Please fill required areas.")
return
} else {
window.location.href="/SuccessPage.html"
}}
)
</script>

Add required input pattern to variables inside if

I have the following if that, so far, the only thing it does is to not let it trigger the form ajax submission if any input is blank. Being empty is one of the conditions but besides that, I'd also like it to prevent the form from being sent if a required filling pattern for each field is not respected. I've tried some things but they didn't work, so I guess I'm probably making mistakes regarding the synthax or other details. What would be the best way to do it?
(function($){
$('#enquiry').submit( function(event){
event.preventDefault();
var fname = $.trim($('.fname').val());
var lname = $.trim($('.lname').val());
var email = $.trim($('.email').val());
var subject = $.trim($('.subject').val());
var message = $.trim($('.message').val());
if (fname === '' || lname === '' || email === '' || subject === '' || message === ''){
alert('trigger error message')
}
else{
alert('ajax call sending the data')
}
Here's the form code, in case it's relevant:
<form id="enquiry" method="post" onsubmit="return false">
<div class="form">
<input class="input fname" placeholder="a" name="fname" type="text" autocomplete='off' pattern="[a-zA-Z]{1,36}" required></input>
<label for="namef" class="">Your name</label>
</div>
<div class="form">
<input class="input lname" placeholder="a" name="lname" type="text" autocomplete='off' pattern="[a-zA-Z]{1,36}" required></input>
<label for="surname" class="">Your surname</label>
</div>
<div class="form">
<input class="input email" placeholder="a" name="email" type="text" autocomplete='off' pattern="[^#\s]+#[^#\s]+\.[^#\s]+" required></input>
<label for="email" class="">Your email</label>
</div>
<div class="form custom-select">
<select class="input subject" name="subject" autocomplete='off' required>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<div class="form2">
<textarea class="input message" placeholder="a" name="message" autocomplete='off' pattern="[0-9a-zA-Z- ]" required></textarea>
<label for="tellme" class="">Tell me something</label>
</div>
<div class="contactbutton">
<button type="submit" class="button" role="button"><span>SUBMIT</span></button>
</div>
</form>

Jquery validation is not working with g:form

Hello I can not validate my form with jquery validation. it does not giving me any errors but I can still type number and letters to the name field.
Here is the code for validation:
jQuery.validator.addMethod("lettersonly", function(value, element) {
return this.optional(element) || /^[a-z\s]+$/i.test(value);
}, "Only alphabetical characters");
$('#customer-form').validate({
rules: {
name: {
lettersonly: true
}
}
});
and here is the code for the form:
<html>
<head>
<title></title>
<asset:stylesheet src="application.css"/>
<asset:javascript src="jquery-3.3.1.min.js"/>
<asset:javascript src="application.js"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/additional-methods.min.js"></script>
<g:form controller="customer" action="saveCustomer" class="customer-form">
<form>
<div class="form-group">
<label for="name">Name</label>
<input type="text" required class="form-control name" id="name" placeholder="Enter first and last name" name="name">
</div>
<div class="form-group">
<label for="code">Code</label>
<input type="text" required class="form-control" id="code" placeholder="Enter code" name="code">
</div>
<div class="form-group">
<label for="contactP">Contact Person</label>
<input type="text" class="form-control" id="contactP" placeholder="Enter contact person" name="contactP">
</div>
<div class="form-group">
<label for="status">Status</label>
<select class="form-control" required id="status" name="status">
<option disabled selected>Please select a Status</option>
<option value="Active">Active</option>
<option value="Inactive">Inactive</option>
</select>
</div>
<g:link controller="customer" action="index" ><button type="button" class="btn btn-primary">Cancel</button></g:link>
<button type="submit" class="btn btn-default" style = "background-color: #b52222">Add</button>
</form>
</g:form>
Thank you.
You are calling validate on customer-form id.
$('#customer-form').validate({
but your form does not have any id. It has a class.
So either adds an id in the form (id="customer-form") or change jquery code to
$('.customer-form').validate({

Form Validation is successful but form doesn't submit

I have a simple form where I am using a vanilla JS library (https://pristine.js.org/) for form validation. The form validation is successful (mostly) but then the form doesn't submit. For the life of me I can't figure out what's going wrong.The form is supposed to post to a PHP file where I can get the posted variable values.
My HTML page with the form and necessary JS and CSS are in the jsfiddle here. In case JSFiddle is acting up, the actual code's below.
I'd appreciate it if someone can help me out with this.
Thanks a ton!
Dexxterr
P.S.: I've beginner level knowledge about JS.
My HTML Code:
<div style="width: 50%; margin: auto;">
<form class="fv-stacked-form" id="inquiry" method="POST" action="form.php">
<div class="fv-row form-group">
<label>Which industry does your organization belong to?</label>
<div>
<input class="form-control" type="checkbox" name="industry[]" value="Manufacturing" id="indManufacturing" min="1" required data-pristine-min-message="Select at least 1" />
<label class="label-inline" for="indManufacturing">Manufacturing</label>
</div>
<div>
<input class="form-control" type="checkbox" name="industry[]" value="Education" id="indEducation" min="1" required data-pristine-min-message="Select at least 1" />
<label class="label-inline" for="indEducation">Education</label>
</div>
<div>
<input class="form-control" type="checkbox" name="industry[]" value="Real Estate" id="indRealestate" min="1" required data-pristine-min-message="Select at least 1" />
<label class="label-inline" for="indRealestate">Real Estate</label>
</div>
<div>
<input class="form-control" type="checkbox" name="industry[]" value="" id="indOther" min="1" required data-pristine-min-message="Select at least 1" />
<label class="label-inline" for="indOther">Other</label>
<input style="display: none;" class="label-inline" type="text" name="indOtherValue" id="indOtherValue" value="" minlength="3" class="form-control" data-pristine-min-message="Please enter your industry" />
</div>
</div>
<div class="fv-row form-group">
<label>What is your budget? (In USD)</label>
<input class="form-control" type="number" min="100" required name="budget" data-pristine-min-message="Enter at least 100" />
</div>
<div class="fv-row form-group">
<label>How soon do you want to get started??</label>
<div>
<input class="form-control" type="radio" name="timeline[]" value="Immediately" id="immediately" required />
<label class="label-inline" for="immediately">Immediately</label>
</div>
<div>
<input class="form-control" type="radio" name="timeline[]" value="3Months" id="3months" required />
<label class="label-inline" for="3months">In the next 3 months</label>
</div>
<div>
<input class="form-control" type="radio" name="timeline[]" value="6Months" id="6months" required />
<label class="label-inline" for="6months">In the next 6 months</label>
</div>
<div>
<input class="form-control" type="radio" name="timeline[]" value="NoIdea" id="noidea" required />
<label class="label-inline" for="noidea">I don't have a timeline yet</label>
</div>
</div>
<div class="fv-row form-group">
<label>First Name</label>
<input class="form-control" type="text" name="fname" required />
</div>
<div class="fv-row form-group">
<label>Last Name</label>
<input class="form-control" type="text" name="lname" required />
</div>
<div class="fv-row form-group">
<label>Company Email</label>
<input class="form-control" type="email" name="email" required />
</div>
<div class="fv-row form-group">
<label>No. of Employees</label>
<select class="form-control" id="ageRangeField" required>
<option value=""></option>
<option value="1-100">1-100</option>
<option value="100-500">100-500</option>
<option value="500-2500">500-2500</option>
<option value="2500+">2500+</option>
</select>
</div>
<div class="fv-row form-group">
<input name="formsubmit" id="formsubmit" type="submit" class="" value="Submit" />
</div>
</form>
<p id="confmsg" style="display: none;">Thank you for submitting the form.</p>
</div>
My JS Code:
window.onload = function ()
{
var form = document.getElementById("inquiry");
var pristine = new Pristine(form);
form.addEventListener('submit', function (e)
{
e.preventDefault();
var valid = pristine.validate();
// alert('Form is valid: ' + valid);
if(valid === true)
{
// alert("This works");
return true;
}
else
{
// alert("This doesn't work");
}
});
};
var sb = document.getElementById('formsubmit'); // Submit button
var cbother = document.getElementById('indOther'); // Checkbox
var txtother = document.getElementById('indOtherValue'); // Other Textbox
cbother.addEventListener('click',function(e){
if(cbother.checked){
cbother.value=txtother.value;
txtother.style.display = 'block';
}else{
txtother.value='';
txtother.style.display = 'none';
}
},false);
e.preventDefault();
is preventing the form from being submitted. If you simply remove it the form will be submitted even if the pristine check fails. So what you want to do is only prevent the default behaviour (which is the form to be submitted) if the pristine check fails:
form.addEventListener('submit', function (e)
{
var valid = pristine.validate();
// alert('Form is valid: ' + valid);
if(valid === true)
{
// alert("This works");
return true;
}
else
{
e.preventDefault();
// alert("This doesn't work");
}
});
to simplify that a little you could simply write:
form.addEventListener('submit', function (e)
{
//if the pristine check fails, prevent the form from being submitted
if(!pristine.validate()){
e.preventDefault();
}
});

How can I link two html forms with one google sheet?

<script>
const scriptURL = ''
const form = document.forms['submit-to-google-sheet']
form.addEventListener('submit', e => {
e.preventDefault()
fetch(scriptURL, { method: 'POST', body: new FormData(form)})
.then(response => console.log('Success!', response))
.catch(error => console.error('Error!', error.message))
})
</script>
<div class="col-md-5">
<div class="background-form">
<form id="contact" action="" method="post">
<fieldset>
<input placeholder="Your name" name="Name" type="text" tabindex="1" required >
</fieldset>
<fieldset>
<input placeholder="Your Email Address" name="Email" type="email" tabindex="2" required>
</fieldset>
<fieldset>
<input placeholder="Your Phone Number" name="Phone_No" type="tel" tabindex="3" required>
</fieldset>
<fieldset>
<select name="Category_Interested" title="Center" class="form-control" required>
<option value=""> Category Interested In</option>
<option value="Modular Furnitur">Modular Furniture</option>
<option value="Home Furnishing">Home Furnishing</option>
<option value="Kitchen Appliances">Kitchen Appliances</option>
</select>
</fieldset>
<fieldset>
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
</fieldset>
<div class="callus">
<span class="call-span">Call Us: +91 9711600069</span>
</div>
</form>
</div>
<section id="fixed-form-container">
<div class="button blink">
<span>Free Enquiry</span>
</div>
<div class="body">
<form name="submit-to-google-sheet">
<div class="form-group">
<label for="name">Name:</label>
<input type="name" class="form-control" id="name" name="Name">
</div>
<div class="form-group">
<label for="contact">Phone No.:</label>
<input type="tel" name="Phoneno" class="form-control" id="contact">
</div>
<div class="form-group" style="margin-top: -38px;">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email" name="email">
</div>
<div class="form-group">
<label for="category">Category Interested In</label>
<select name="category" title="Center" class="form-control" required>
<option value=""> Category Interested In</option>
<option value="Modular Furnitur">Modular Furniture</option>
<option value="Home Furnishing">Home Furnishing</option>
<option value="Kitchen Appliances">Kitchen Appliances</option>
</select>
</div>
<button type="submit" class="btn btn-default">Submit</button>
<div class="callus callus-phone">
<span class="call-phone-span call-span">Call Us: +91 9711600069</span>
</div>
</form>
</div>
</section>
</div>
I am trying to link two forms that are created using HTML with one google sheet. If i try adding two SrciptURLs, it shows an error. I want that data of both the forms can be seen in one Google Sheet. Is that possible? If yes, then how?
These are the forms along with the script that i added to link it to the Google Sheet.
There is no error when i fill in the entries and submit in both the forms but details of only one form can be seen in the Google Sheets.

Categories

Resources