validating input field after moving to another field and not on keydown - javascript

i am currently validating an input field but my current issue is that i have it set to validate after every key stroke. I want to change it to validate after the cursor has been moved out from that input field not sure of the syntax.
This is my current input field:
<input type="text" id="EmailField" name="Email" placeholder="Email" data-val="true" data-bind="value:email, event: { keyup: validateEmail, valueUpdate: 'afterkeydown'}" required="">
my validateEmail function:
$this.validateEmail = function () {
var regexEmail = ...Expression...;
var result = regexEmail.test($('#EmailField').val());
if (!result) {
notify({title: 'Invalid Email', text:'Invalid email format', type:'error'})
}
};

use onblur event and call a function
in that function you may use validations
<input id="a" onblur="fun(this);">
<script>
function fun(ab){
alert(ab.value);
}
</script>
jsbin example
The above code snippet uses onblur event of input
Answer Updated
Use blur instead of keyup in event
<input type="text" id="EmailField" name="Email" placeholder="Email" data-val="true" data-bind="value:email, event: { blur: validateEmail, valueUpdate: 'afterkeydown'}" required="">

Related

onchange event listener doesn't work when single digit numbers are appended to the value in input field[type=number]

I have two input fields, both of them have onchange event listener added to them:
HTML
<input type="number" size=5 style="width:80px;" id="funit" autocomplete="off" required>
<input type="number" size=5 style="width:80px;" id="tunit" autocomplete="off" required>
JAVASCRIPT
document.getElementById("funit").addEventListener("change",f1);
document.getElementById("tunit").addEventListener("change",f1);
function f1(){
var funit=document.getElementById("funit").value;
var tunit=document.getElementById("tunit").value;
if(funit.toString()!="" && tunit.toString()!=""){
if(funit>tunit){
alert("incorrect units");
document.getElementById("funit").value="";
document.getElementById("tunit").value="";
}
}
}
Now I have another function which fetches the values from a row of a table and inserts them into the fields. Like for example:
funit=6;
tunit=7;
Now if I add a 0 along with the input in funit, i.e., if I make it 60, then it should trigger the onchange listener, but it doesn't. Only when I erase both the input fields, and then type again, does the event listener get triggered. Why so? How do I fix this?
document.getElementById("funit").addEventListener("change",f1);
document.getElementById("tunit").addEventListener("change",f1);
function f1(){
var funit=document.getElementById("funit")
var tunit=document.getElementById("tunit")
if(funit.value && tunit.value){
if(Number(funit.value)>Number(tunit.value)){
alert("incorrect units");
funit.value="";
tunit.value="";
}
}
}
<input type="number" size=5 style="width:80px;" id="funit" autocomplete="off" required>
<input type="number" size=5 style="width:80px;" id="tunit" autocomplete="off" required>

document.getElementById().value not returning a value

So i'm trying to just access the value from my date input
let object = document.getElementById('tripdateinput').value;
console.log(object);
<input autocomplete="off" id="tripdateinput" type="date" name="tripdate" required>
but when i try to console.log(object) it returns as empty. This is also only happening with my date inputs my normal text inputs are working.
Add this script to get your selected date value:
document.getElementById('tripdateinput').addEventListener("change", function(event) {
console.log(event.target.value);
});
<input autocomplete="off" id="tripdateinput" type="date" name="tripdate" required>
What this does is create an eventListener to your input field. Similar to a single onChange eventHandler, this will get the event when your input field changes it's values.
Your code should look like this:
<input autocomplete="off" id="tripdateinput" type="date" name="tripdate" required>
<script>
document.getElementById('tripdateinput').addEventListener("change", function(event) {
console.log(event.target.value);
});
</script>

How to make pop up show up after the fields of the form are fulfilled?

I'm making a website for a project and I've added a subscribe to our newsletter section and I've set up a pop when you click the subscribe button. Before I added that js, the form wouldn't proceed until both fields were filled out and it showed a popup telling you to fill it.
<input type="text" placeholder="Name" name="name" required>
<input type="text" placeholder="Email address" name="mail" required>
<label>
<input type="checkbox" checked="checked" name="subscribe"> Daily
Newsletter
</label>
<input type="submit" value="Subscribe" onclick="myFunction1()">
Now with the js, it shows the pop up I made thanking the person for subscribing when I click the subscribe button regardless if the fields are filled or not.
function myFunction1() {
alert("Thanks for subscribing!")
}
You should include all the inputs in a form tag, as so:
<form id='myForm'>
<input type="text" placeholder="Name" name="name" required>
<input type="text" placeholder="Email address" name="mail" required>
<label>
<input type="checkbox" checked="checked" name="subscribe"> Daily
Newsletter
</label>
<input type="submit" value="Subscribe" onclick="myFunction1()">
</form>
This approach is better because then all the inputs are together in one entity, without it the 'submit' input won't really work. It won't know what is being submitted. Within the form tag it knows it's submitting the form together with all inputs contained within.
The form tag has its own set of events that you can add listeners to.
Including a 'submit' event.
To add the event listener to run your function whenever a submit happens on the form, you can do as so:
document.getElementById('myForm').addEventListener('submit', myFunction1)
Alternatively, you can also set the listener on the html:
<form onsubmit='myFunction1()'>
But keep in mind that with the 'addEventListener' method you can add multiple listeners to the same event. While the onsubmit property only accepts one function.
More info on events and on the addEventListener method:
https://developer.mozilla.org/en-US/docs/Web/Events
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
inside the function check for the field values. Confirm whether the fields are empty. If not then show the alert
function myFunction1() {
var f1 = ; // get value of field1;
var f2 = ; // get value of field2;
if (f1 != '' && f2 != ''){
alert("Thanks for subscribing!");
}
}
give all inputs of class, eg: 'myInput', and loop over them to check their value before alerting.
function myFunction1() {
var inputs = Array.fom(document.getElementsByClassName('myInput'));
var allChecked = false;
inputs.map(function(input){
if (input.value == '') { allChecked = false }
});
if (allChecked) { alert("Thanks for subscribing!") }
};

I would like just recover the value of the field that I have just entered in jquery

I would like just recover the value of the field that I have just entered in jquery.
Thank you for your help
function test()
{
//????????
}
<form>
<label>Price</label>
<input type="text" name="price[]" onchange="test();"><br>
<label>Price</label>
<input type="text" name="price[]" onchange="test();"><br>
<label>Price</label>
<input type="text" name="price[]" onchange="test();">
</form>
For starters, if you're using jQuery, then use jQuery. Remove the inline onclick attributes:
<input type="text" name="price[]">
And attach a single event handler to your inputs:
$(function () {
$('input[type="text"]').change(function () {
var value = $(this).val();
// etc.
});
});
Within that handler, you can refer to the input raising the event as this and get its value accordingly as in the code above.
Example

How to validate an input type="text" element to only accept certain content?

I have a text input field:
<input type="text" name="email" size="25" placeholder="Email Address" required/>
Is there a way to format the input field to only allow certain text to be valid?
For example: In that particular text field, the user must input an email address which ends in #hotmail.co.uk. Any other email domains such as #yahoo.com will not be valid and therefore will show an error when clicking submit (Will not register the user).
You can use the HTML5 pattern attribute to validate whether the string ends with #hotmail.co.uk.
In this case you can use the following regular expression:
^.*#hotmail\.co\.uk$
<form>
<input type="text" name="email" pattern="^.*#hotmail\.co\.uk$" size="25" placeholder="Email Address" required/>
<input type="submit" />
</form>
Alternatively, you could also just attach an input event listener to the element and check manually. This is just a basic example, feel free to customize to your needs. I would still suggest validating that the value is a valid email address by using the regex from this question.
$('input[name="email"]').on('input', function(e) {
var isValid = this.value.match(/^.*#hotmail\.co\.uk$/) !== null;
$(this).toggleClass('isValid', isValid);
});
.isValid {
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="text" name="email" size="25" placeholder="Email Address" required/>
<input type="submit" />
</form>
many solutions are available:
validate form with javascript.
use 2 inputs: a text input for the username and a select options or radio buttons for "#site.com"
pattern attribute on input
Extended answer using the "pattern" attribute (from Josh Crozier):
After the user changed the value of the input you can check it for a valid input:
In addition you could test the input while the user is typing the value and highlight the border:
function check(el) {
if (new RegExp(el.pattern).test(el.value) == false) {
alert("Bad Input")
}
}
function test(el) {
if (new RegExp(el.pattern).test(el.value) == false) {
el.classList.add("bad")
} else {
el.classList.remove("bad")
}
}
.bad {
border-color: red;
}
<input pattern="^.*#hotmail\.co\.uk$" onchange="check(this)" oninput="test(this)" type="text" name="email" size="25" placeholder="Email Address" required/>

Categories

Resources