this is my whole code for a user login in cakephp:
<div class="form-group col-lg-2 col-md-4" id="login-box" style="text-align:center; margin: 100px auto 0 auto;">
<div style="font-size:3em;text-align: center;">
<i class="fas fa-table"></i>
</div>
<div style="text-align: center;font-size: 50px;font-family: 'Tahoma';">
Fatables
</div>
<br>
<div class="header" style="text-align:center"><?php /*echo __('Authenticate');*/?></div>
<br>
<form action="<?php echo $this->Html->url( array('controller'=>'users','action'=>'loginmodal')); ?>" method="post">
<div class="body">
<div class="form-group">
<input type="text" name="username" id="username" class="form-control" placeholder="Username" autofocus/>
</div>
<div class="form-group">
<input type="password" name="password" id="password" class="form-control" placeholder="Password"/>
</div>
</div>
<div class="footer">
<button type="submit" class="btn btn-primary"><?php echo __('Sign In');?></button>
</div>
</form>
<br/>
<p >© Fatables <?php echo date('Y');?></p>
</div>
<script type=“text/javascript”>
$("#username").on("keypress", function(e) {
/* ENTER PRESSED*/
if (e.keyCode == 13) {
/* FOCUS ELEMENT */
var inputs = $(this).parents("form").eq(0).find(":input");
var idx = inputs.index(this);
if (idx == inputs.length - 1) {
inputs[0].select()
} else {
inputs[idx + 1].focus(); // handles submit buttons
inputs[idx + 1].select();
}
return false;
}
});
</script>
As you can see I'm trying to change ENTER to TAB when pressed on my first input. Thing is we use a barcode scanner and in most cases form data will be filled by scanning so I want for determined inputs to change focus to the next one when enter pressed.
For some reason the above (and many more ways to do it) doesn't work, I don't know already if there's some problem with my syntax, or the selector or the function itself.
I'll appreciate some help over here.
Related
there I am working on a project for the login form.
I need to write a code that when the user pressed Enter on the Keyboard in input X code Call the function Y.
I saw Many Pages on Stackoverflow but theirs not working for me. I use Jquery In my project.
<div class="main">
<h2 class="title"><br> Wikipedia Image Finder!</h2>
<div class="form">
<label class="S_label" for="input_data"> <span class="Label_text">Image Title:</span> </label>
<div class="ll">
<input name="input" type="text" maxlength="999" id="input_data" minlength="1" placeholder="Query to Search" required>
<div class="img_btn" id="submit_div""></div>
</div>
</div>
</div>
Please try below code.
$("input").keyup(function(event){
// checking the pressed key is Enter
if(event.which == 13) {
search(event.target.value);
}
});
function search(text){
alert('called search with '+ text)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main"> <h2 class="title"><br> Wikipedia Image Finder!</h2> <div class="form"> <label class="S_label" for="input_data"> <span class="Label_text">Image Title:</span> </label> <div class="ll"> <input name="input" type="text" maxlength="999" id="input_data" minlength="1" placeholder="Query to Search" required> <div class="img_btn" id="submit_div""></div> </div></div> </div>
I made the following code, but it prevents form submission in both cases.
$(document).ready(function() {
$('#password_result_success').hide();
$('#password_result_error').hide();
$('#current_password_blank').hide();
$('#confirm_new_password').blur(function(event) {
data = $('#current_password').val();
var len = data.length;
if (len < 1) {
//alert("Password cannot be blank");
$('#current_password_blank').show();
// Prevent form submission
//event.preventDefault();
$('form#form_change_password').submit(function(e) {
e.preventDefault();
});
} else {
$('#current_password_blank').hide();
}
if ($('#new_password').val() != $('#confirm_new_password').val()) {
//alert("Password and Confirm Password don't match");
//$('#password_result').html('<i class="fa fa-exclamation-circle"></i>');
$('#password_result_success').hide();
$('#password_result_error').show();
// Prevent form submission
$('form#form_change_password').submit(function(e) {
e.preventDefault();
});
} else {
$('#password_result_error').hide();
$('#password_result_success').show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<hr>
<div class="container text-center">
<h1>change password</h1>
<form action="post.php" id="form_change_password">
<div class="form-group">
<input type="password" class="form-control" id="current_password" placeholder="current password">
</div>
<div id="current_password_blank" class="alert-danger"><i class="fa fa-exclamation-circle"></i>current password can't be blank </div>
<div class="form-group">
<label for="new_password">new password</label>
<input type="password" class="form-control" id="new_password" placeholder="New Password">
</div>
<div class="form-group">
<label for="confirm_new_password">confirm new password</label>
<input type="password" class="form-control" id="confirm_new_password" placeholder="Confirm New Password">
</div>
<div id="password_result_success" class="alert-success"><i class="fa fa-check"></i> password match</div>
<div id="password_result_error" class="alert-danger"><i class="fa fa-exclamation-circle"></i> password do not match</div>
<div class="text-center">
<button type="submit" id="change_password" class="btn btn-default">Change Password</button>
</div>
</form>
</div>
The complete validation I will make in PHP, but I would like to check via jQuery first, before making an AJAX call to PHP validation. The problem is that my script prevents the form submission even when it returns true.
You are setting your submit handler inside your blur handler, this means that any time that code is triggered a new handler will be set. It's not conditional execution, it will fire even when calling submit outside that block. You can inspect the bound listeners in your browser to check that once you hit that code, the listener remains after the execution.
You can rely on the visibility of your validation containers to determine if you should prevent submission or not. You could also use other techniques, like adding a has-error class to your form or data-* attributes, but the idea remains the same.
$(document).ready(function() {
// Cache selectors to make them a bit shorter and more performant
$pwd_success = $('#password_result_success').hide();
$pwd_error = $('#password_result_error').hide();
$pwd_blank = $('#current_password_blank').hide();
$('#confirm_new_password').blur(function(event) {
data = $('#current_password').val();
var len = data.length;
if (len < 1) {
//alert("Password cannot be blank");
$pwd_blank.show();
} else {
$pwd_blank.hide();
}
if ($('#new_password').val() != $('#confirm_new_password').val()) {
$pwd_success.hide();
$pwd_error.show();
} else {
$pwd_error.hide();
$pwd_success.show();
}
});
// Attach listener globally (and only once)
$('form#form_change_password').submit(function(e) {
if ($pwd_blank.is(':visible') || $pwd_error.is(':visible')) {
// Prevent submission if there's an error
e.preventDefault();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<hr>
<div class="container text-center">
<h1>change password</h1>
<form action="post.php" id="form_change_password">
<div class="form-group">
<input type="password" class="form-control" id="current_password" placeholder="current password">
</div>
<div id="current_password_blank" class="alert-danger"><i class="fa fa-exclamation-circle"></i>current password can't be blank </div>
<div class="form-group">
<label for="new_password">new password</label>
<input type="password" class="form-control" id="new_password" placeholder="New Password">
</div>
<div class="form-group">
<label for="confirm_new_password">confirm new password</label>
<input type="password" class="form-control" id="confirm_new_password" placeholder="Confirm New Password">
</div>
<div id="password_result_success" class="alert-success"><i class="fa fa-check"></i> password match</div>
<div id="password_result_error" class="alert-danger"><i class="fa fa-exclamation-circle"></i> password do not match</div>
<div class="text-center">
<button type="submit" id="change_password" class="btn btn-default">Change Password</button>
</div>
</form>
</div>
My HTML code is
<body>
<form name="contactus" id='contactus' action="test1.php" method="post" enctype="multipart/form-data">
<input type="hidden" value="2" name="Tab" id="Tab">
<div class="row underlinDv">
<div class="col-sm-4">
Your Email :
</div>
<div class="col-sm-8">
<input maxlength="100" type="email" class="form-control" placeholder="Enter Email" name="UEmailLogin" id="UEmailLogin" minlength="3">
</div>
</div>
<!--18-->
<div class="row underlinDv">
<div class="col-sm-8 col-md-offset-4">
<input type="submit" id="demo2GetTags" class="btn btn-primary btn-md" value="Submit" onclick='search()' />
</div>
</div>
</form>
<script>
function search() {
var Tab = document.getElementById("Tab").value;
alert(Tab);
var Eamillogin = document.getElementById("UEmailLogin").value;
if (Eamillogin == "") {
alert("please enter email");
Eamillogin.focus();
}
}
</script>
</body>
When I click on submit button, JavaScript alert shows "please enter email". It works fine. But Eamillogin.focus(); not working. After showing alert, the form automatically direct to test1.php page.Pointer not focus on Email. How to correct it?
Eamillogin variable contains the value of the #UEmailLogin element.
To set the focus on the element, use element.focus();
Here's updated code
var Eamillogin = document.getElementById("UEmailLogin"); // Removed .value from here
if (Eamillogin.value === "") { // Added .value here
alert("please enter email");
Eamillogin.focus(); // Focus element
}
function search() {
var Tab = document.getElementById("Tab").value;
var Eamillogin = document.getElementById("UEmailLogin");
if (Eamillogin.value === "") {
alert("please enter email");
Eamillogin.focus();
}
}
<form name="contactus" id='contactus' action="test1.php" method="post" enctype="multipart/form-data">
<input type="hidden" value="2" name="Tab" id="Tab">
<div class="row underlinDv">
<div class="col-sm-4">
Your Email :
</div>
<div class="col-sm-8">
<input maxlength="100" type="email" class="form-control" placeholder="Enter Email" name="UEmailLogin" id="UEmailLogin" minlength="3">
</div>
</div>
<!--18-->
<div class="row underlinDv">
<div class="col-sm-8 col-md-offset-4">
<input type="submit" id="demo2GetTags" class="btn btn-primary btn-md" value="Submit" onclick='search()' />
</div>
</div>
</form>
I have created a contact (4 input text) form and I want if user doesn't text in anyone of input a text message will appear above each input.
Contact From:
<form class="form-horizontal" method="post" action="#" name="form" onsubmit="return validation();">
<fieldset>
<div><h2 style="font-family: Myriad Pro;color:#7f8c8c">form</h2></div>
<div class="form-group">
<div class="col-sm-8">
<input id="fname" name="name" type="text" placeholder="Όνομα" class="form-control">
<div id="error1" style="color:#e8645a"></div>
</div>
</div>
<div class="form-group">
<div class="col-sm-8">
<input id="lname" name="surname" type="text" placeholder="Επώνυμο" class="form-control">
<div id="error2" style="color:#e8645a"></div>
</div>
</div>
<div class="form-group">
<div class="col-sm-8 ">
<input id="email" name="email" type="email" placeholder="E-mail" class="form-control">
<div id="error3" style="color:#e8645a"></div>
</div>
</div>
<div class="form-group">
<div class="col-sm-10 ">
<textarea id="message" name="message" type="text" placeholder="Το σχόλιο σας.." columns="7" rows="7" class="form-control" style="background-color:#e5e6e6;" required=""></textarea>
<div id="error4" style="color:#e8645a"></div>
</div>
</div>
<div class="form-group">
<div class="col-sm-3 text-center">
<button type="submit" class="btn btn-primary btn-block" id="label" >SEND</button>
</div>
</div>
</fieldset>
</form>
And the script I use:
function validation(){
if (document.form.name.value == "") {
document.getElementById('error1').innerHTML="*Error Msg1 ";
}else if (document.form.surname.value == "") {
document.getElementById('error2').innerHTML="*Error Msg2 ";
}else if (document.form.email.value == "") {
document.getElementById('error3').innerHTML="*Error Msg3 ";
}else if (document.form.message.value == "") {
document.getElementById('error4').innerHTML="*Error Msg4 ";
}
return false;
}
My issue is that if for example the user doesn't fill his name(error message displayed below the text field) BUT then if he text his name the error message IS still displayed.How can I solve this?
There is an example here: Fiddle
I would suggest that you clear the error message at the start of the validation again:
function validation(){
document.getElementById('error1').innerHTML=""
document.getElementById('error2').innerHTML=""
document.getElementById('error3').innerHTML=""
document.getElementById('error4').innerHTML=""
//Your validation code below:
...
}
This way whenever the input validates, all of the error messages will be cleared and evaluated again.
You might want to consider storing the labels at the start of the function in a field so you have easy access to them later. This should help with readability as well. For example:
function validation(){
var errorMessage1 = document.getElementById('error1');
//Access the label using your new variable:
errorMessage1.innerHTML = "Your value here"
...
On keyup event lets try resetting the error message
document.form.name.addEventListener("keyup", function(){
document.getElementById('error1').innerHTML = '';
});
I am validating form with jquery. So when form submit i am using event.preventDefault(); after validate form , form will be submit to respective action page.But in my case it doesn't work.
Code what i did-
$('form[name=contact_form]').submit(function(event) {
event.preventDefault();
var formData = $('form[name=contact_form]').serialize();
var phone = $.trim($('form[name=contact_form]').find('input[name=PHONE]').val()).length;
var intRegex = /[0-9 -()+]+$/;
var alert = $('#contact_alert');
var success = $('#contact_success');
if(phone==0){
phone.focus();
alert.html("<p class='alert alert-danger' style='text-align:left;'>Phone number is required</p>");
}
else if((phone < 10)){
phone.focus();
alert.html("<p class='alert alert-danger' style='text-align:left;'>Please enter a valid phone number</p>");
return false;
}else{
return true;
}
});
Html Page :
<?php
echo form_open_multipart('home/inquiry', array('name' => 'contact_form'));
?>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="hidden" name="form_type" value="C">
<input type="text" name="NAME" id="user-name" class="form-control" placeholder="Full Name"/>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" name="PHONE" id="user-phone" class="form-control" placeholder="Phone"/>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" name="EMAIL" id="user-email" class="form-control" placeholder="Email"/>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" name="SUBJECT" id="user-subject" class="form-control" placeholder="Reason for inquiry"/>
</div>
</div>
<div class="col-md-12">
<textarea class="form-control" name="MESSAGE" id="user-message" placeholder="Message"></textarea>
</div>
<div class="col-md-12 text-left">
<div class="form-group">
<input type="submit" name="submit" class="btn btn-warning">
</div>
</div>
</div>
<?php echo form_close(); ?>
Do not call event.preventDefault(); if you want the form to be submitted after it validates ok.
Returning false after failed validation is enough.
$(this).submit();
When it's valid.
Try to replace the return true; for $(this).submit();
I usually do something like
$("#submit").submit(function(e){
if(validateFields() == true){ //If all fields are valid
$("#submit").submit();
}
else{
e.preventDefault(e);
}
});