i use jQuery Plugin For Email Address Management - Multiple Emails
I want to prevent the user from entering two identical emails.
To do this, I use the array. Every email that is entered is poured into the array.
In fact, my goal is to prevent the user from entering duplicate emails
But unfortunately I can not do it properly
var items = [];
function guardarNumeros() {
boxvalue = $('.email-ids').text();
items.push(boxvalue);
console.log(items);
// Check if a value exists in the fruits array
if (items.indexOf("a#a.com") !== -1) {
console.log("Value exists!")
} else {
console.log("Value does not exists!")
}
}
return this.each(function () {
$(this).after("<span class=\"to-input\">Email :</span>\n" +
"<div class=\"all-mail\"></div>\n" +
"<input type=\"text\" name=\"email\" class=\"enter-mail-id\" placeholder=\"Enter Email ...\" />");
let $orig = $(this);
let $element = $('.enter-mail-id');
$element.keydown(function (e) {
var keycode = e.keyCode ? e.keyCode : e.which;
$element.css('border', '');
if (keycode == "13" || keycode == "188" || keycode == "9" || keycode == "32") {
let getValue = $element.val();
if (/^[a-z0-9._-]+#[a-z0-9._-]+\.[a-z]{2,6}$/.test(getValue)) {
$('.all-mail').append(
'<span class="email-ids">' + getValue +
'<span class="cancel-email">x</span></span>' );
$element.val('');
email += getValue + ';'
guardarNumeros()
} else {
$element.css('border', '1px solid red')
}
}
$orig.val(email.slice(0, -1))
});
Can you help me
Thank
you always are checking if the "a#a.com" was entered.
try something like:
if (items.indexOf( boxvalue ) !== -1) {
console.log("Value exists!")
} else {
console.log("Value does not exists!")
items.push(boxvalue);
}
Related
$(".my-input").each(function () {
var theSelectBoxContainer = $(this).parent().next();
var theSelectBoxValue = theSelectBoxContainer.dxSelectBox('instance').option('value');
var txtvalue = $(this).val();
if (txtvalue != "" && txtvalue!=" ") {
if (i)
field += " and ";
field = field + "'" + $(this).val() + "'";
i++;
}
});
Above my jQuery code. With this code, I overwrite the values entered in the TextBoxes. But I do not want textboxes to be written when null characters are entered. But it is written. I check with if, but it is not. Where is the error?
You can use $.trim(txtvalue) which will validate empty, null and undefined.
Or you can also use:
if (txtvalue === undefined || txtvalue === null) {
// show error messages..
} else {
//execute this code..
}
I have text area controls in my page and I had code it such way that when user click on text area or hit 'ENTER' key that time it will create bullet-list in text area. But problem is that if user click on text area and it will create bullet-list but if user does not type anything in text area then it should get empty and bullet should be removed. In simple way text area bullet-list should get removed if it has no data in it.
And one more thing is to prevent user deleting bullet from text area.
here is my code :
<textarea name="MondayAcomp" id="MondayAcomp" cols="45" rows="5" onKeyDown="if(event.keyCode == 13) return false;" onKeyUp="bulletOnEnter(this.id)" onFocus="onfoc(this.id)" onBlur="onFocOff(this.id)" style="margin: 0px; width: 200px; height: 219px;"></textarea>
Javascript functions:
function onfoc(id) {
if (document.getElementById(id).value == "") {
document.getElementById(id).value += '• ';
}
}
function onFocOff(id) {
if (document.getElementById(id).value == '• ') {
document.getElementById(id).empty;
}
}
function bulletOnEnter(id) {
var keycode = (event.keyCode ? event.keyCode : event.which);
if (keycode == '13') {
event.preventDefault();
document.getElementById(id).value += '\n• ';
}
var txtval = document.getElementById(id).value;
if (txtval.substr(txtval.length - 1) == '\n') {
document.getElementById(id).value = txtval.substring(0, txtval.length - 1);
}
}
jsfiddle here
It is not .empty, it is .value = "";.
For the keyCode you need to pass event parameter to your callback function too.
You can prevent adding empty lines, by checking the last line in your return key callback too.
Only way I can imageine, to prevent deleting the bullets, is a loop at the end and check each line start.
function onfoc(id) {
if( document.getElementById(id).value == '' ) {
document.getElementById(id).value +='• ';
}
}
function onFocOff(id) {
if( document.getElementById(id).value == '• ' ) {
document.getElementById(id).value = '';
}
}
function bulletOnEnter(event, id) {
event = event || window.event;
// handle 'return' key
var keycode = event.keyCode || event.charCode || event.which;
var txtval = document.getElementById(id).value;
if( keycode == 13 && txtval.substr(txtval.length - 2) != '• ' ) {
event.preventDefault();
document.getElementById(id).value += '\n• ';
}
// remove possible last empty line
txtval = document.getElementById(id).value;
if( txtval.substr(txtval.length - 1) == '\n' ) {
document.getElementById(id).value = txtval.substring(0, txtval.length - 1);
}
// check if each line starts with a bullet
var lines = document.getElementById(id).value.split('\n')
for( var i = 0, l = lines.length; i < l; i++ ) {
if( lines[i].substr(0, 1) !== '•' ) {
lines[i] = '•' + lines[i];
}
}
document.getElementById(id).value = lines.join('\n');
}
<textarea id="MondayAcomp" onKeyDown="if(event.keyCode == 13) return false;" onKeyUp="bulletOnEnter(event, this.id)" onFocus="onfoc(this.id)" onBlur="onFocOff(this.id)"></textarea>
As additional answer, I converted the code to use jQuery instead of plain JS, because you tagged your question with jQuery.
$('#MondayAcomp').on({
focus: function() {
if( $(this).val() == '' ) {
$(this).val($(this).val() + '• ');
}
},
blur: function() {
if( $(this).val() == '• ' ) {
$(this).val('');
}
},
keydown: function(e) {
if( e.keyCode == 13 ) {
e.preventDefault();
}
},
keyup: function(e) {
var element = $(this),
value = element.val();
// handle 'return' key
if( e.keyCode == 13 && value.substr(-2) != '• ' ) {
e.preventDefault();
element.val((value += '\n• '));
}
// remove possible last empty line
if( value.substr(-1) == '\n' ) {
element.val((value = value.substring(0, value.length - 1)));
}
// check if each line starts with a bullet
var lines = element.val().split('\n')
for( var i = 0, l = lines.length; i < l; i++ ) {
if( lines[i].substr(0, 1) !== '•' ) {
lines[i] = '•' + lines[i];
}
}
element.val(lines.join('\n'));
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="MondayAcomp"></textarea>
I am trying to format the phone number field based on the country .The logic works fine when the user fill in the details but does not work when the country is changed and filled in again.
Ex:
Filled in the form for Germany and then without reloading the page if try change county to US and fill in phone "+" is being added even though format for it is different.
$(document).ready(function($){
$('#country').on('change', function() {
if ( this.value == 'US' || this.value == 'CA')
{
$('#C_BusPhone')
.keydown(function (e) {
var key = e.charCode || e.keyCode || 0;
$phone = $(this);
if (key !== 8 && key !== 9) {
if ($phone.val().length === 4) {
$phone.val($phone.val() + ')');
}
if ($phone.val().length === 5) {
$phone.val($phone.val() + ' ');
}
if ($phone.val().length === 9) {
$phone.val($phone.val() + '-');
}
}
return (key == 8 ||
key == 9 ||
key == 46 ||
(key >= 48 && key <= 57) ||
(key >= 96 && key <= 105));
})
.bind('focus click', function () {
$phone = $(this);
if ($phone.val().length === 0) {
$phone.val('(');
}
else {
var val = $phone.val();
$phone.val('').val(val);
}
})
.blur(function () {
$phone = $(this);
if ($phone.val() === '(') {
$phone.val('');
}
});
}
else
{
$('#C_BusPhone')
.keydown(function (e) {
if ($(this).val().indexOf("+") === -1) {
$(this).val("+" + $this.val());
}
})
}
});
});
Not sure if this was the cause for your error, but this line needs to get corrected from
$(this).val("+" + $this.val());
to this
$(this).val("+" + $(this).val());
It was a fast catch, just use your browser javascript console for debugging.
See the updated fiddle here. You might want to add the starting parenthesis to your international prefix as well.
I want my email form filed to be validated by jQuery.
if user typed val() matches any values in array, i want to run some function before submitting.
ex.
if I type
abc.com is not in array. so OK.
bbb.net is in array. so NG.
username#ccc.co.uk part of string is in array. so NG.
blah#aaa.ne. i do not care... let PHP decide if its valid email. so javascriptly OK.
html:
<form action="./" method="post" id="test">
email address: <input type="text" id="mail">
<input type="submit" val="SUBMIT " id="subm">
</form>
javascript:
var arr = [
'aaa.ne.jp', 'bbb.net', 'ccc.co.uk', 'ddd.co.kr'
];
$('#test').on('submit', function() {
var _value = $('#mail').val();
if( $.inArray(_value, arr) > 0 || _value == '') {
console.log(_value + ' cant be accepted');
return false;
} else {
console.log(_value + ' is GO!');
return false;//do not submit just for the sake of example.
}
});
JSFIDDLE
i used jquery's inArray() method, but somehow ,for example, username#ccc.co.uk gets through the validation even though ccc.co.uk is in array.
any solution will be appreciated. thanx.
Try splitting the email and compare the latter part after #
var arr = [
'aaa.ne.jp', 'bbb.net', 'ccc.co.uk', 'ddd.co.kr'];
$('#test').on('submit', function () {
var _value = $('#mail').val();
if (_value !== '' && _value.indexOf('#') > -1) {
var parts = _value.split('#');
if ($.inArray(parts[1], arr) > 0 || _value == '') {
console.log(_value + ' cant be accepted');
return false;
} else {
console.log(_value + ' is GO!');
return false; //do not submit just for the sake of example.
}
} else {
console.log(_value + ' cant be accepted');
return false;
}
});
Check Fiddle
The email value you are comparing has more characters that what is needed for the inArray() method to work. It is not a direct comparison. You could do this. It gets everything after the '#' to compare in $.inArray.
$('#test').on('submit', function() {
var _value = $('#mail').val();
var _value2 = _value.split("#").pop();
if( $.inArray(_value2, arr) > 0 || _value2 == '') {
console.log(_value + ' cant be accepted');
return false;
} else {
console.log(_value + ' is GO!');
return false;//do not submit just for the sake of example.
}
});
You can use grep
var arr = [
'aaa.ne.jp', 'bbb.net', 'ccc.co.uk', 'ddd.co.kr'];
$('#test').on('submit', function () {
var _value = $('#mail').val(),
_matches = $.grep(arr, function (val, i) {
return _value.indexOf(val) != -1
});
if (_matches.length > 0) {
//contains something
} else {
console.log(_value + ' cant be accepted');
return false;
}
});
At the url http://www.candyundies.com/template_non_product.php, I am using an autocomplete script on the search box for suggestions. I have tested and is working in current versions of Chrome, Safari, Opera, Firefox and IE 8. However, I noticed in IE 8, it is throwing an Object expected error after the first letter is typed in the search box but the script continues to work flawlessly. I'm sure it is a syntax error or something small I have overlooked but I cannot seem to find the problem. Any help would be much appreciated.
Contents of autocomplete.js:
// global variables
var acListTotal = 0;
var acListCurrent = -1;
var acDelay = 100;
var acURL = null;
var acSearchId = null;
var acResultsId = null;
var acSearchField = null;
var acResultsDiv = null;
function setAutoComplete(field_id, results_id, get_url) {
// initialize vars
acSearchId = "#" + field_id;
acResultsId = "#" + results_id;
acURL = get_url;
// create the results div
$("#auto").append('<div id="' + results_id + '"></div>');
// register mostly used vars
acSearchField = $(acSearchId);
acResultsDiv = $(acResultsId);
// on blur listener
acSearchField.blur(function(){ setTimeout("clearAutoComplete()", 100) });
// on key up listener
acSearchField.keyup(function (e) {
// get keyCode (window.event is for IE)
var keyCode = e.keyCode || window.event.keyCode;
var lastVal = acSearchField.val();
// check an treat up and down arrows
if(updownArrow(keyCode)){
return;
}
// check for an ENTER or ESC
if(keyCode == 13 || keyCode == 27){
clearAutoComplete();
return;
}
// if is text, call with delay
setTimeout(function () {autoComplete(lastVal)}, acDelay);
});
}
// treat the auto-complete action (delayed function)
function autoComplete(lastValue) {
// get the field value
var part = acSearchField.val();
// if it's empty clear the resuts box and return
if(part == ''){
clearAutoComplete();
return;
}
// if it's equal the value from the time of the call, allow
if(lastValue != part){
return;
}
// get remote data as JSON
$.getJSON(acURL + part, function(json){
// get the total of results
var ansLength = acListTotal = json.length;
// if there are results populate the results div
if(ansLength > 0){
var newData = '';
// create a div for each result
for(i=0; i < ansLength; i++) {
newData += '<div class="unselected">' + json[i] + '</div>';
}
// update the results div
acResultsDiv.html(newData);
acResultsDiv.css("display","block");
// for all divs in results
var divs = $(acResultsId + " > div");
// on mouse over clean previous selected and set a new one
divs.mouseover( function() {
divs.each(function(){ this.className = "unselected"; });
this.className = "selected";
});
// on click copy the result text to the search field and hide
divs.click( function() {
acSearchField.val(this.childNodes[0].nodeValue);
clearAutoComplete();
});
} else {
clearAutoComplete();
}
});
}
// clear auto complete box
function clearAutoComplete() {
acResultsDiv.html('');
acResultsDiv.css("display","none");
}
// treat up and down key strokes defining the next selected element
function updownArrow(keyCode) {
if(keyCode == 40 || keyCode == 38){
if(keyCode == 38){ // keyUp
if(acListCurrent == 0 || acListCurrent == -1){
acListCurrent = acListTotal-1;
}else{
acListCurrent--;
}
} else { // keyDown
if(acListCurrent == acListTotal-1){
acListCurrent = 0;
}else {
acListCurrent++;
}
}
// loop through each result div applying the correct style
acResultsDiv.children().each(function(i){
if(i == acListCurrent){
acSearchField.val(this.childNodes[0].nodeValue);
this.className = "selected";
} else {
this.className = "unselected";
}
});
return true;
} else {
// reset
acListCurrent = -1;
return false;
}
}
Issue resolved. See comment by ocanal.