Simple JS form validation does not seem to be working in IE. Any help would be grand. It seems to be submitting the form rather then giving me an alert when nothing is entered into the email field. works as intended in Chrome, FF, Opera, Safari, Just NOT in IE.
HTML
<form action="index.php" name="loginForm" onsubmit="return validateLoginForm();" method="post" >
<div class="formBg">
<input type="text" name="email" id="email" tabindex="1" class="formPos" value="" placeholder="Email" />
<div class="loginText">Forgot your password?</div>
</div>
<div class="formBg">
<input type="password" name="password" id="password" tabindex="2" class="formPos" value="" placeholder="Password" />
<div class="loginText">Keep me logged in</div>
</div>
<div id="loginBtnFrame">
<div id="loginBtn">
<input type="submit" name="submit" id="loginFormBtn" value=" " tabindex="3" />
</div>
<div class="slider-frame"><span class="slider-button">no</span></div>
<input type="checkbox" value="1" id="rememberMe" name="rememberMe" />
</div>
</form>
Javascript
function validateLoginForm()
{
var x=document.forms["loginForm"]["email"].value;
if (x==null || x=="")
{
alert("email must be filled out");
return false;
}
}
Thank you so much in advance.
For those that may hit the same issue.
I found that IE simple form validation conflicts with HTML or some Jquery 'placeholders'. I got around it by adding '(x==null || x=="" || x=="Email")' to the JS command. Where 'Email' is the placeholder text. Now working as intended.
Related
I am new to HTML, PHP and JavaScript, so expect mistakes.
I've got the form working and sending contents via email in my PHP file. That works. I'm using the Iframe to keep people on page and that seems to work as intended.
I'm trying to get a bootstrap alert to appear once the form is submitted. So it's collapsed by default and I simply want it to appear once the form is submitted or the button pressed. I cannot figure it out for the life of me. The form will submit as expected but the script does not seems to run with the alert.
The script is within the HTML doc:
<script>
function FormSubmit(){
alert("The form was submitted");
$('#AlertSuccess'.show('fade');
}
</script>
<div id="AlertSuccess" class="alert alert-success collapse">
<!--<a id="CloseAlert" href="#" class="close">×</a> -->
<strong>Awesome</strong> We will contact you shortly
</div>
<div class="contact_form_container">
<iframe name="keepitneat" style="display:none;">
</iframe>
<form id="contact_form" class="contact_form" action="/contact_send_btn.php" method="post" target="keepitneat" onsubmit="FormSubmit()">
<input id="contact_form_name" name="name" class="input_field contact_form_name" type="text" placeholder="Name" required="required" data-error="Name is required.">
<input id="contact_form_email" name="email"class="input_field contact_form_email" type="email" placeholder="E-mail" required="required" data-error="Valid email is required.">
<input id="contact_form_number1" name="number1"class="input_field contact_form_number1" type="text" placeholder="Mobile Number" required="required" data-error="Phone number is required">
<input id="contact_form_number2" name="number2"class="input_field contact_form_number2" type="text" placeholder="Landline Number">
<button id="contact_send_btn" type="submit" onclick="FormSubmit()" class="contact_send_btn trans_200" value="Submit">send</button>
</form>
</div>
Please make me feel silly and point out the typo or logic mistake as I've been stuck on this for a while.
You have to hide the #AlertSuccess in default and on form submit, call the show() to display the message.
And you have forgot to close the bracket in $('#AlertSuccess'.show('fade');.
It should be
$('#AlertSuccess').show('fade');
function FormSubmit(){
$('#AlertSuccess').show('fade');
}
.hidden{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="AlertSuccess" class="alert alert-success collapse hidden">
<!--<a id="CloseAlert" href="#" class="close">×</a> -->
<strong>Awesome</strong> We will contact you shortly
</div>
<div class="contact_form_container">
<iframe name="keepitneat" style="display:none;"></iframe>
<form id="contact_form" class="contact_form" action="/contact_send_btn.php" method="post" target="keepitneat" onsubmit="FormSubmit()">
<input id="contact_form_name" name="name" class="input_field contact_form_name" type="text" placeholder="Name" required="required" data-error="Name is required.">
<input id="contact_form_email" name="email"class="input_field contact_form_email" type="email" placeholder="E-mail" required="required" data-error="Valid email is required.">
<input id="contact_form_number1" name="number1"class="input_field contact_form_number1" type="text" placeholder="Mobile Number" required="required" data-error="Phone number is required">
<input id="contact_form_number2" name="number2"class="input_field contact_form_number2" type="text" placeholder="Landline Number">
<button id="contact_send_btn" type="submit" onclick="FormSubmit()" class="contact_send_btn trans_200" value="Submit">send</button>
</form>
</div>
The browser console (F12) should tell you about the syntax error in you javascript. You forgot the closing ) in $('#AlertSuccess'.show('fade');.
$('#AlertSuccess').show('fade');
I am creating a form where the user will register for a website and in that form there are two input fields to help confirm the users password. I am trying to disable the submit button when the passwords are not matching and then reenable it when the passwords do match. I currently have the disable part working but I cannot reenable it.
I have tried looking at this post how to check confirm password field in form without reloading page but I couldn't figure out what I needed to do beyond what I currently have.
Code:
<form id="myform" action="process_registration.php" class="basic-grey" method="post">
<div>
<label for="firstName" id="firstName">* First Name:</label>
<input type="text" name="firstName" id="firstName" minlength=1 required />
</div>
<div>
<label for="lastName" id="lastName">* Last Name:</label>
<input type="text" name="lastName" id="lastName" minlength=1 required />
</div>
<div>
<label for="email" id="email">* Email:</label>
<input type="email" name="email" id="email" minlength=1 required />
</div>
<div>
<label for="username" id="usernameLabel">* Username:</label>
<input type="text" name="username" id="username" minlength=1 required />
</div>
<div>
<label for="password" id="passwordLabel">* Password:</label>
<input type="password" name="password" id="password" minlength=1 required />
</div>
<div>
<label for="passwordConfirm" id="passwordLabelConfirm">* Password Confirmation:</label>
<input type="password" name="passwordConfirm" id="passwordConfirm" minlength=1 required />
<span id="message"></span>
</div>
<div>
<input id="submit" type="submit" name="submit" value="Submit" />
</div>
</form>
<?php include ABSOLUTE_PATH . '_includes/footer.inc.php'; ?>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'>
</script>
<script src='https://cdn.jsdelivr.net/npm/jquery-validation#1.17.0/dist/jquery.validate.js'></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script>
$('form').validate();
</script>
<script>
$('#password, #passwordConfirm').on('keyup', function() {
if ($('#password').val() == $('#passwordConfirm').val()) {
$('#message').html('Matching').css('color', 'green');
$('submit').prop('disabled', false);
} else
$('#message').html('Not Matching').css('color', 'red');
$('submit').prop('disabled', true);
});
</script>
Your code doesn't work for two reasons:
Because you're using $('submit') instead of $('#submit'). You're mistakenly using submit as though it were the tagname rather than the id of the button.
Because, the else part of your if statement, where the code to re-enable the button is located has no braces {} and thus only executes the first instruction. The second one is considered to be outside the if statement and it's executed always last, thus keeping the button permanently disabled.
Snippet:
(only kept the code essential for demonstration)
/* --- JavaScript --- */
$('form').validate();
$('#password, #passwordConfirm').on('keyup', function() {
if ($('#password').val() == $('#passwordConfirm').val()) {
$('#message').html('Matching').css('color', 'green');
$('#submit').prop('disabled', false);
} else {
$('#message').html('Not Matching').css('color', 'red');
$('#submit').prop('disabled', true);
}
});
<!--- HTML --->
<form id="myform" action="process_registration.php" class="basic-grey" method="post">
<div>
<label for="password" id="passwordLabel">* Password:</label>
<input type="password" name="password" id="password" minlength=1 required />
</div>
<div>
<label for="passwordConfirm" id="passwordLabelConfirm">*
Password Confirmation:</label>
<input type="password" name="passwordConfirm" id="passwordConfirm"
minlength=1 required />
<span id="message"></span>
</div>
<div>
<input id="submit" type="submit" name="submit" value="Submit" />
</div>
</form>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'>
</script>
<script src='//cdn.jsdelivr.net/npm/jquery-validation#1.17.0/dist/jquery.validate.js'>
</script>
<script src="//cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js">
</script>
Note: In the answer of the question you linked the code works, because there is only one instruction following else, whereas you have two.
I found out actually that it doesn't always work. Therefor I added a return false to the script.
$('#user_password, #user_password_retype').on('keyup', function () {
if ($('#user_password').val() == $('#user_password_retype').val()) {
$('#message').html('Matching').css('color', 'green');
$("#savebutton").prop('disabled', false);
return true;
} else
$('#message').html('Not Matching').css('color', 'red');
$("#savebutton").prop('disabled',true);
return false;
});
I don't know what's wrong in this. Validation not working here.
Form submitted without validation.
function validate()
{
if( document.myForm.username.value == "" )
{
alert( "Please provide your user name!" );
document.myForm.fname.focus() ;
return false;
}
if( document.myForm.email.value == "" )
{
alert( "Please provide your Email!" );
document.myForm.email.focus() ;
return false;
}
if (!(/^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/).test(document.myform.email.value))
{
alert("You have entered an invalid email address!")
return false;
}
}
return false;
}
<form class="form-horizontal" method="post" id="myForm" action=" " name="myForm" onsubmit="return validate()">
<div class="form-group">
<p class="text-center">Register Information</p>
<br>
</div>
<div class="form-group">
<label for="username" class="control-label col-xs-2">UserName</label>
<div class="col-xs-2">
<input type="text" class="form-control" id="name" name="username"
placeholder="UserName">
</div>
</div>
<div class="form-group">
<label for="email" class="control-label col-xs-2">Email Address</label>
<div class="col-xs-2">
<input type="text" class="form-control" name="email" id="email"
placeholder="abc#domain.com" />
</div>
</div>
<div class="form-group">
<label for="password" class="control-label col-xs-2">Password</label>
<div class="col-xs-2">
<input type="password" class="form-control" name="password" id="password"
placeholder="##########" />
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-2 col-xs-10">
<button type="submit" name="submit" class="btn btn-primary">submit</button>
</div>
</div>
</form>
I don't know whats wrong in this.Please help me to fix it.
Try using type="email" form email id field validation and 'required' directive for required fields.
<input type="email" class="form-control" name="email" id="email" placeholder="abc#domain.com" required/>
If you tried to do validation using HTML5 features you have to add attrributes like required or pattern to your inputs.
You trigger validate() on submit bu there is no javascript code in the markup you pasted.
Start with this article.
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Data_form_validation
It describes native browser support for valdiation and later suggests some libraries and examples of custom code.
In validate function the closing bracket just before the last "return false" statement is unnecessary.
I am writing simple form with two text boxes for logIn process and wanted to get this form
submitted on the click of "Go" button of the i-Phone keyboard which get open as the textbox
gets focus.
When i keep a submit button with these two text boxes the go button starts working otherwise
it won't.
i am using
jQuery mobile v1.2.0
PhoneGap v2.5
code without submit button:
<form id="loginForm">
<div class="ui-body">
<div data-role="controlgroup" id="my-controlgroup">
<input data-theme="b" type="text" name="text-username" id="text-username" placeholder="Username" value="" />
<input data-theme="b" type="password" name="text-pwd" id="text-pwd" placeholder="Password" value="" />
</div>
</div>
</form>
code with submit button:
<form id="loginForm" data-ajax="false">
<div class="ui-body">
<div data-role="controlgroup" id="my-controlgroup">
<input data-theme="b" type="text" name="text-username" id="text-username" placeholder="Username" value="" />
<input data-theme="b" type="password" name="text-pwd" id="text-pwd" placeholder="Password" value="" />
<button type="submit" data-theme="none" name="submit" value=""></button>
</div>
</div>
</form>
I don't need submit but since i have to submit form using iPhone soft keyboard any help is very much appreciated.
Thanks.
you need a keypress event my friend. The "Go" button on your phone is equivalent to the Enter key of your physical keyboard. You have to check for that keyCode. Here's a code :
$("#my-controlgroup").on("keypress", "input[type=text]", function(e) {
//check for enter key
if(e.which === 13) {
//check for empty input
if($("input:empty").length === 0) {
alert("submitted!");
}
}
});
Here's the Fiddle, if it helps !
<form id="loginForm" data-ajax="false">
<div class="ui-body">
<div data-role="controlgroup" id="my-controlgroup">
<input data-theme="b" type="text" name="text-username" id="text-username" placeholder="Username" value="" />
<input data-theme="b" type="password" name="text-pwd" id="text-pwd" placeholder="Password" value="" />
<button type="submit" data-theme="none" name="submit" value="">GO</button>
</div>
</div>
</form>
I have simple form:
<form id="loginform" name="loginform" action="" method="post">
<div data-role="fieldcontain">
<label for="login">Login:</label>
<input type="text" name="login" id="login" value="" />
</div>
<div data-role="fieldcontain">
<label for="password">Password:</label>
<input type="password" name="password" id="password" value="" />
</div>
<div class="ui-body">
<fieldset class="ui-grid-a">
<div class="ui-block-a"><button type="button" class="exitapp">Close</button></div>
<div class="ui-block-b"><button type="submit" id="elogin" onclick="return false;">Login</button></div>
</fieldset>
</div>
</form>
And some code in jQuery Mobile. In case press enter button in Firefox form is not submit - it's great, but in Android Emulator it's submit and it cannot using my JS code :( How can repair this?
$("form").submit(function(){
//do your js code
return false;
});
I have found this to work but I always test on my Android device rather than the emulator...:
<form action"..." method="..." onSubmit="return check_form();">
...
</form>
function ckeck_form() {
...
if (error === true) {
return false;
} else {
return true;
}
}
$('#loginform').submit(function(e) {
e.preventDefault();
});
See MDN for more info on preventDefault().