How to validate on pressing tab key using jquery - javascript

I want to validate my jsp fields while pressing the tab button.How to implement it using jquery.
Below is my jsp page
<form:form method="POST" commandName=" test" name="testname" onclick="submitForm();" >
<div>
<form:input path="testpath" type="text" class="values " name="tpath" id="code"/>
</div>
<div>
<form:input path="testname" type="text" class="values " name="tname" id="name"/>
</div>
<div>
<input type="submit" value="Register">
</div>
</form:form>
jQuery
function submitForm(){
$('form').on('submit', function (e) {
alert("test");
var focusSet = false;
if (!$('#tpath').val()) {
if ($("#tpath").parent().next(".validation").length == 0) // only add if not added
{
$("#tpath").parent().after("<div class='validation' style='color:red;margin-bottom: 20px;'>Please enter the code</div>");
}
e.preventDefault();
$('#tpath').focus();
focusSet = true;
} else {
$("#tpath").parent().next(".validation").remove(); // remove it
}
if (!$('#name').val()) {
if ($("#name").parent().next(".validation").length == 0) // only add if not added
{
$("#name").parent().after("<div class='validation' style='color:red;margin-bottom: 20px;'>Please enter seasoname</div>");
}
e.preventDefault(); // prevent form from POST to server
if (!focusSet) {
$("#name").focus();
}
} else {
$("#name").parent().next(".validation").remove();
}
});
}
on button click only my form validates.How to validate by clicking inside form.

Capture keycode and write an event for keypress on the elements as below:
//Combine keypress for both the elements as below
$("#tpath,#name").on('keypress',function(e){
if(e.which==9 && !$(this).val())
if ($(this).parent().next(".validation").length == 0)
{
$(this).parent().after("<div class='validation' style='color:red;margin-bottom: 20px;'>Please enter the code</div>");
}
else {
$(this).parent().next(".validation").remove(); // remove it
}
$(this).focus();
});

$('#tpath').keyup(function(e) {
e.keyCode; // this value
if(e.keyCode == 9){
//e.keyCode is 9 mean tab is pressed
// write your validation code over here.
}
});
I think this code can work for you

Use this
$('#tpath').keyup();
This triggers on release key event.

Related

How to get the search to work when the user presses enter

This is the button Iv`e created and search bar that has a function to go to a page when a user clicks search tab but I need it to work when the user presses enter as well.
This is the search bar and button
<input type="text" method="get" class="form-control" id="search" placeholder="Search" value="">
<button type="button" id="go" class="btn btn-default" onclick="sendToPage();">Search</button>
This is the function
function sendToPage(){
var input = document.getElementById("search").value;
//Check to see if the user has entered apple/iphone;
if (input === "apple"){
//location.href="apple.html";
location.replace("apple.html");
return false;
}
else if (input === "iphone"){
location.replace("apple.html");
return false;
}
}
Putting a form around the input should give you the result you're looking for. Then just add an "onsubmit" to the form that calls your sendToPage(); function.
You can add a keyup and check its event.keyCode. If the key code is 13, it means the user clicked enter while on the input text.
Something like this:
document.getElementById("search")
.addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode == 13) {
if (input === "apple")
location.replace("apple.html");
else if (input === "iphone")
location.replace("apple.html");
}
return false;
});
Or using your function sendToPage():
document.getElementById("search")
.addEventListener("keyup", function(event) {
event.preventDefault();
sendToPage();
return false;
});
It seems the id of your input field is 'search' so you can try this:
note that the keycode of enter is 13. so we can compare the input codes with 13. if its true then do the search.
$('#search').keydown(function(event) {
if (event.keyCode == 13) {
var input = $(this).val();
if (input === "apple"){
//location.href="apple.html";
location.replace("apple.html");
return false;
}
else if (input === "iphone"){
location.replace("apple.html");
return false;
}
return false;
}
});
});
This is the button
<!-This is the button -->
<div id="search-bar">
<div class="form-group">
<input type="text" method="get" class="form-control" id="search" placeholder="Search" value="">
<button type="button" id="go" class="btn btn-default" onclick="sendToPage();" onChange="aliasonclick">Search</button>
</div>
</div>

OnBlur Validation Requires Onsubmit Button to Be Clicked Twice in Pure Javascript

I have a form which validates password null/blank or not using onblur. And I use a submit button to submit the form. However the submit button needs to be clicked twice before to work. It does not work on the first click after something has been filled in the password box. Below is the code.
With respect to Jquery, I require solution in pure Javascript.
I have tried onkeyup, but that is not a good solution as it will put strain on system, and server (for ajax).
<!DOCTYPE html>
<html>
<body>
<script>
var error_user_password = false;
function checkpw(){
var user_password = document.forms["joinform"]["user_password"].value;
if (user_password == null || user_password == "") {
text = "Password : Required";
document.getElementById("errormsg4").innerHTML = text;
error_user_password = false;
} else {
document.getElementById("errormsg4").innerHTML = "";
error_user_password = true;
}
}
function submitall() {
checkpw()
if(error_user_password == false) {
return false;
} else {
return true
}
}
</script>
</body>
<form id="joinform" method="post" name="joinform" action="#hello" onsubmit="return submitall()" >
<h2>Join</h2>
<input type="password" name="user_password" id="user_password" placeholder="Password" onblur="checkpw()" />
<div class ="errormsg" id ="errormsg4"></div><br>
<input type="submit" name="join" id="join" value="Submit" ><br><br>
</form>
</html>
OnBlur Validation Requires Onsubmit Button to Be Clicked Twice in Pure Javascript
This happens because the blur event is captured from the onblur event handler and not bubbled to the form submit button.
A full javaScript solution is based on:
addEventListener
activeElement: inside the blur event I check after 10 milliseconds if the submit button get the focus.
My snippet:
var error_user_password = false;
function checkpw(ele, e){
var user_password = document.forms["joinform"]["user_password"].value;
if (user_password == null || user_password == "") {
text = "Password : Required";
document.getElementById("errormsg4").innerHTML = text;
error_user_password = false;
} else {
document.getElementById("errormsg4").innerHTML = "";
error_user_password = true;
}
}
function submitall(ele, e) {
checkpw();
if(error_user_password == false) {
e.preventDefault();
} else {
console.log('form submitted');
}
}
window.addEventListener('DOMContentLoaded', function(e) {
document.getElementById('user_password').addEventListener('blur', function(e) {
checkpw(this, e);
setTimeout(function() {
if (document.activeElement.id == 'join') {
document.activeElement.click();
}
}, 10);
}, false);
document.getElementById('joinform').addEventListener('submit', function(e) {
submitall(this, e);
}, false);
});
<form id="joinform" method="post" name="joinform" action="#hello">
<h2>Join</h2>
<input type="password" name="user_password" id="user_password" placeholder="Password"/>
<div class ="errormsg" id ="errormsg4"></div><br>
<input type="submit" name="join" id="join" value="Submit" ><br><br>
</form>

Submit form on keypess after verification

$(document).ready(function() {
//attach keypress event listener to the whole document
$(document).keypress(function(event){
if(event.keyCode === 13){
SearchThis.submit();
return false;
}
});
});
So now my form (SearchThis) is submitted whenever the enter key is pressed which is great however how do I modify it to check if mysearchfied has been completed before it submits?
IE. If mysearchfied is empty and the enter key is pressed don't submit the form. If mysearchfied contains text and the enter key is pressed then submit the form.
Hope you can help! Thanks...
If you just want to validate the textbox for required use HTML5 required attribute like:
<input type="text" class="form-control" name="mysearchfield"
value="" id="mysearchfield" placeholder="Company or SmartPages Category..." autocomplete="off" required>
listenOn = function(domElement) {
domElement.addEventListener('keydown', function(event) {
if (event.keyCode == 13) {
onEnterPressed();
}
});
function onEnterPressed() {
if (validateForm()) {
submitForm();
} else {
alert('Invalid form');
}
}
function validateForm() {
var inputValue = document.getElementById("myInput").value;
return (inputValue.length >= 1);
}
function submitForm() {
var formElement = document.getElementById("myForm");
alert('Submit form');
formElement.submit();
}
}
listenOn(document);
//listenOn(document.getElementById("myForm")); //You could also listen keydowns on form element(sure only if global keypress isn't exactly what you want).
<form id="myForm" action="#send.php">
<input id="myInput" type="text" placeholder="I'm empty now." />
</form>
There are two ways to validate the form.
-> Check is the form valid usind the form valid function
SearchThis.validate().valid()
-> validate each field for value as told by #n01ze
if the id of your input field is mysearchfield, then you could do it like this:
var msf = document.getElementById("mysearchfield").value;
$(document).ready(function() {
//attach keypress event listener to the whole document
$(document).keypress(function(event){
if(event.keyCode == 13){
if (msf != "") {
SearchThis.submit();
return false;
}
else
{
// some code here....
}
}
});
});
if (event.keyCode === 13) {
if ($('mysearchfied_ID_or_Class').val()!=='') {
//mysearchfied is not empty
SearchThis.submit();
}
else {
//dont submit, do your checks
}
return false;
}

How to create a javascript function that responds to a click or enter pressed?

I need the if bottom if statement to run if #nextQ is clicked (like it is currently) or if enter is pressed.
$('input[type=text]').on('keyup', function(e) {
if (e.which == 13) {
alert("enter is pressed");
return true;
}
});
$('#nextQ').click(function() {
//me.html validations
if (actual == 0 && document.URL.indexOf("me.html") >= 0){
loadNew();
}
});
If your input is wrapped in a form and that form has a submit button, it is submitted when you press enter inside the input.
Knowing this you should listen to the submit event:
The form:
<form class="myForm">
<input name="answer" type="text">
<button id="nextQ" type="submit">next Question</button>
</form>
JS:
jQuery( '.myForm' ).on( 'submit', function( event ) {
//me.html validations
if (actual == 0 && document.URL.indexOf("me.html") >= 0){
loadNew();
}
} );

Block enter key when less than 4 digits entered

I'm trying to implement a code in my script that will block enter key until 4 digits entered in a text field.
Here are my forms:
<div id="inputtext">
<input type="text" id="dreamtext" maxlength="45" spellcheck='false' autofocus/>
<input type="submit" id="nextstepbutton" value="next step" onclick="window.open('step3.html','_self','resizable=yes')" />
</div>
This particular script hides submit button when < 4 characters entered and shows it when 4 or more entered. It also modifies some div content.
<script type="text/javascript">
$(function(){
$("#nextstepbutton").hide();
$("#dreamtext").keyup(function() {
var val = $(this).val();
if (val.length > 3) {
$('#nextstepbutton').show();
document.getElementById("message").innerHTML = "<h1>hit return or next step</h1>";
}
else {
$('#nextstepbutton').hide();
document.getElementById("message").innerHTML = "<h1>type please</h1>";
}
});
});
</script>
This script presses submit button when enter key pressed
<script type="text/javascript">
$("#dreamtext").keyup(function(event){
if(event.keyCode == 13){
$("#nextstepbutton").click();
}
});
</script>
Now, what is the best way to block the enter key when less than 4 digits entered? Thanks
There is a method in the keydown(/up/press) event called preventDefault.
This makes any default action not happen.
$("#dreamtext").keyup(function(event) {
if ($(this).val().length < 4) {
event.preventDefault();
}
if (event.keyCode == 13) {
$("#nextstepbutton").click();
}
});
You could also connect it to the jQuery .submit() handler.
$("#someForm").submit(function(){
if ($("#dreamText").val().length < 4) {
return false;
}
})

Categories