I have been trying to make a simple HTML form that takes a phone number, password, and confirmed password. I tried using the HTML5 required attribute to ensure all fields were filled out upon submission, but since finding out Safari doesn't support that, I moved on to using the following code from a different stack overflow topic to validate the form:
var form = document.getElementById('text'); // form has to have ID: <form id="formID">
form.noValidate = true;
form.addEventListener('submit', function (event) { // listen for form submitting
if (!event.target.checkValidity()) {
event.preventDefault(); // dismiss the default functionality
if (document.getElementById('password_confirm').value != document.getElementById('password').value) {
alert('Passwords must match');
//document.getElementById("alert_pw_match").style.color = rgba(37, 33, 90, 0.64);
} else {
// input is valid -- reset the error message
alert('All fields are required');
}
}
}, false);
The issue I'm having is that I want to move away from using the standard alert boxes and just highlight the relevant fields or display some text indicating why the form is invalid, but whenever I add a line other than the alert the form submits without anything happening.
Related
IE11 Autocomplete not showing me any suggestion for name, address, phone number, email etc fields, i filled the same page form fields a number of times. And i checked Autocomplete is ON in IE11 settings and page form fields also have attributes like autocomplete="given-name name", autocomplete="shipping street-address", autocomplete="home tel", autocomplete="home email" etc.
Only thing is, for submitting, form have button type input field calling 'submitFunc' onClick of it, to make sure IE saves the fields for AutoComplete, I'm calling the below function as well
Still it's not resolving the issue.
submitFunc: function () {
this.saveForAutocomplete();
.....
},
saveForAutocomplete: function() {
if (window.external && ('AutoCompleteSaveForm' in window.external)) {
var form = document.getElementById ("step1RegForm");
window.external.AutoCompleteSaveForm(form);
}
else {
console.log("Your browser does not support AutoCompleteSaveForm");
}
}
Please suggest any solution to this.
EDIT: HTML code https://embed.plnkr.co/qbY9S67AHOj6XGiDYrtM/
I've got a multiple step form, so when I finally come to the submit button, many of the required inputs are no longer visible for the user, therefore the HTML5 alert can't be apreciate by the user. There's a way to show an alert telling what input is incomplete?
JavaScript example:
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("The form is incomplete");
return false;
}
}
It's explained here: https://www.w3schools.com/js/js_validation.asp
I am doing validation of entire form which is spread into different section where each section is a nav-tab , when i fill the entire form and cursor is in the last section, on clicking the save button if there is a validation mismatch of textbox in first section(first nav-tab) and if i want the user to be focused to the failed textbox document.getElementById(ID).focus()
is not navigating to the element where validation has failed.
How to achieve the above functionality??
function validate()
{
var valid = true;
var alphaFilter = /^[A-z]{0,}$/;
if (!(alphaFilter.test($('#fieldId').val()))
{
if(valid){$('#fieldId').focus();}
$('#fieldId').css("border-color", "#e84e40");
valid = false ;
}
--- each field has its own if condition
return valid;
}
validate function is called inside the submit function for further processing and valid variable is used to focus first invalid entry in the form.
I would make a param to take in selectors to make this more usable.
Something like this..
function switchtab (){
$("#tab1").removeClass("active");
$("#tab2").addClass("active");
$("#tabpanel1").removeClass("active");
$("#tabpanel2").addClass("active");
//should be good to focus now
$(selector).focus();
}
Im new to Flask .
I try a user log-in page
I validate the user input by jQuery code:
$(document).ready(function(){
//alert('begin');
$(".input.reg_butn").click(function(){
if($("[name=username]").val()==""){
alert("username empty");
}else{
if($("[name=password]").val()==""){
alert("password empty");
}
}
})
})
and my python code is as follow:
#app.route('/login',methods=['GET','POST'])
def login():
.....
My question is how to stop python code running when the js code finds that the user submitted an invalid value (such as empty username of password).
I use alert in JS to notify the user, BUT the python code run as usual.
How to solve it ?
I don't think this is the right approach: to validate data in on the client side. Instead you should do it on the server side using a flask extension which deals with forms and form validation: flask-WTF.
You are capturing the click of the input button, but you need to stop form submission. If you do this with a handler that listens to that instead, you will also be able to run your checks when the user presses the enter key.
$(document).ready(function() {
// Adjust this selector as necessary.
$("form.login").submit(function() {
$(this).preventDefault();
if ($("[name=username]", this).val() == "") {
alert("username empty");
} else {
if ($("[name=password]", this).val() == "") {
alert("password empty");
}
}
});
If you are using HTML5, though, this can all be simplified by adding required to your input tags.
<input type="text" name="username" required>
Any browser that supports it will trap the form submission for you (without the need for any JavaScript).
Can't provide a link to this project due to NDA, but hopefully, the code I'll post will be more than sufficient to solve this.
I'm doing a simple PHP contact form. Nothing crazy. Two text input fields and a checkbox to validate age. If you leave the form unchecked, you can't enter the contest.
I have the validation working....to a point. Here's what is happening. When I keep the checkbox unchecked and I try to submit the form, I get an alert prompt saying I'm not 18 or over. The JS is like this:
if (!document.forms[0].age.checked)
{
alert("Sorry, you must be over 18 to enter...Please check the over 18 box to proceed");
}
That works, and I click "OK", but then the alert prompt immediately comes back! And I'm stuck essentially in a loop.
Anyone know how to properly do this so I can get the form to work?
Have you tried
if (!document.forms[0].age.checked) {
alert("Sorry, you must be over 18 to enter...Please check the over 18 box to proceed");
return false;
}
It must be checked in the form submit event (here inline but should be unobtrusive):
<form onsubmit="return validate(this)"...
and do
function validate(theForm) {
if (!theForm.age.checked) alert("Please....");
return theForm.age.checked;
}
You could try something like:
var validateForm = function (e) {
e.preventDefault();
var formEl = document.forms[0].age;
if (formEl.checked) {
alert("Sorry, you must be over 18 to enter...Please check the over 18 box to proceed");
}
e.stopPropagation();
}
Instantiate the function as you normally would, like:
var button = document.getElementById('submit');
button.addEventListener('click', validateForm, false);
Fiddle