We Keep Coding

How do I get div to show when user enters restricted character in jQuery?

Hello :) I have a form with an input that I have restricted the characters that can be used using jQuery. I would like for a div to display next to or under the input field if a restricted character is pressed.
So far I have:
jQuery(document).ready(function($) {
$('#15').keypress(function(e) {
var regex = new RegExp("^[a-zA-Z0-9-_\s]+$");
var str = String.fromCharCode(!e.charCode ? e.which : e.charCode);
if (regex.test(str)) {
return true;
}
e.preventDefault();
$(codeBlock).appendTo($('#15'));
return false;
});
});
With codeBlock being a variable containing HTML. I can see the HTML in the page source but it isn't actually displaying it and places it under "Shadow Content" which sounds cool but doesn't help me any. It is appending it in the right place, just not showing it.
I've been working on this longer than I'd like to admit. Any help or guidance is greatly appreciated. Have a great day!
const codeBlock = '<div>' +
'<h1>I said only numbers and letters</h1>' +
'</div>';
jQuery(document).ready(function($) {
$('#15').keypress(function(e) {
var regex = new RegExp("^[a-zA-Z0-9-_\s]+$");
var str = String.fromCharCode(!e.charCode ? e.which : e.charCode);
if (regex.test(str)) {
return true;
}
e.preventDefault();
$(codeBlock).appendTo('#15');
return false;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="input_15" id="15" type="text" value="" class="medium " placeholder="Only letters and numbers allowed">

There are two problems here.
append() inserts the code as a child, so your <input /> elements was becoming <input>(yourmessage)</input>. Use insertAfter() instead.
You had your jQuery selector for changing as $(codeBlock).append('#15');. That should have been $('#15'), not '#15', and since we're in an event handler, let's just use this instead, since it's even more clear: $(codeBlock).append(this).
Works for me:
const codeBlock = '<div>' +
'<h1>I said only numbers and letters</h1>' +
'</div>';
jQuery(document).ready(function($) {
$('#15').keypress(function(e) {
var regex = new RegExp("^[a-zA-Z0-9-_\s]+$");
var str = String.fromCharCode(!e.charCode ? e.which : e.charCode);
if (regex.test(str)) {
return true;
}
e.preventDefault();
$(codeBlock).insertAfter(this);
return false;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="input_15" id="15" type="text" value="" class="medium " placeholder="Only letters and numbers allowed">

How onsubmit each class?

I have many textarea,I want to check input length.
if not longer than 10 words, can't submit.
It will alert,but still submit.
function checkinput(){
$('.TextArea').each(function() {
var textl = $(this).val().length;
if ( textl < 10 && (EndTime.getTime()-Time != 0)) {
window.alert ( "answer need large 10 word!" );
return false;
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" action="answer.php" id="form" onsubmit="return checkinput();">

function checkinput() {
//create an event listener for click on your submit button
$('#submit').click(function(e) {
// define a variable to hold textareas
let $Textarea = $('.TextArea');
// run a loop on each textarea
$Textarea.each(function(i, v) {
// variable for each instance of textarea being triggered using keyword this
let input = $(this).val();
// split the value at each word using a blank space
let words = input.split(' ');
// check the length of the split array and see if there is 10 values present
if (words.length < 10) {
window.alert("Textarea " + i + " - answer need large 10 word!");
// preventDefault() keeps the form from submitting and refreshing the DOM
e.preventDefault();
return false;
}
});
});
}
checkinput();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" action="answer.php" id="form">
<textarea class='TextArea'></textarea>
<textarea class='TextArea'></textarea>
<textarea class='TextArea'></textarea>
<textarea class='TextArea'></textarea>
<button id='submit'>Submit</button>
</form>

Add event.preventDefault() for cases when the function is returning false;
function checkinput(event){
$('.TextArea').each(function() {
var textl = $(this).val().length;
if ( textl < 10 && (EndTime.getTime()-Time != 0)) {
event.preventDefault();
window.alert ( "answer need large 10 word!" );
return false;
}
});
return true;
}

English only characters

I have a input type URL and client want to only accept ENGLISH characters on input
Keypress and Blur function is what I have but in blur it still accept this likr inout "建築家test.com"
<input type="url" id="url" required pattern="https?://.+" placeholder="http://example.com">
$("#url").on("keypress", function(event) {
var englishAlphabetDigitsAndWhiteSpace = /[a-zA-Z0-9!##$%^*_|:/.]/g;
var key = String.fromCharCode(event.which);
if (event.keyCode == 8 || event.keyCode == 37 || event.keyCode == 39 || englishAlphabetDigitsAndWhiteSpace.test(key)) {
return true;
}
return false;
});
$("#url").blur(function(e){
var input = $(this).val();
var regex = /[a-zA-Z0-9!##$%^*_|:/.]/g;
if(regex.test(input)) {
alert("OK");
}
else {
alert("no Japanese allowed");
return false;
}
});

Could you try with the following regex:
^([a-zA-Z0-9!##$%^*_|:/.])*$
or that one, depending on if you accept empty string or not as valid entry.
^([a-zA-Z0-9!##$%^*_|:/.])+$
Last but not least, if you want to check that your input is a well-formed UR, have a look at the following link:
What is the best regular expression to check if a string is a valid URL?

How to Validate Input value at two decimal point by inputting from number pad?

I have a JavaScript function to Validate only decimal value.I use the JavaScript onkeyup event.
function onlyNumeric(evt) {
var theEvent = evt || window.event;
var key = theEvent.keyCode || theEvent.which;
var exclusions = [8, 46];
if (exclusions.indexOf(key) > -1) {
return;
}
key = String.fromCharCode(key);
var regex = /[0-9]|\./;
if (!regex.test(key)) {
theEvent.returnValue = false;
if (theEvent.preventDefault) {
theEvent.preventDefault();
}
return false;
}
return true;
}
<input type="text" onkeyup="onlyNumeric(event)" class="form-control" id="ColumnName" name="ColumnName">
It's working fine when I put value not from the number pad. But when I put value by number pad it's not working. So how can i fixed it?
Also I need fix it at two decimal point. But how can I do it?
Is onkeyup event Ok for this purpose?

Below is the code to help you out:
function onlyNumeric(evt) {
var pattern = /^\d{0,4}(\.\d{0,2})?$/i;
var element = document.getElementById("ColumnName");
if(pattern.test(element.value)) {
console.log("Vadid number:" + element.value);
} else {
console.log("Invadid number:" + element.value);
}
}
<input type="text" onkeyup="onlyNumeric(event)" class="form-control" id="ColumnName" name="ColumnName">

You can use this Regex pattern :
/^\d+(?:\.\d{1,2})?$/
Explanation :
\d match a digit...
+ one or more times
( begin group...
?: but do not capture anything
\. match literal dot
\d match a digit...
{1,2} one or two times
) end group
? make the entire group optional
<input type="text" onkeyup="onlyNumeric(event)" class="form-control" id="ColumnName" name="ColumnName">
<script>
function onlyNumeric(evt) {
var rx = /^\d+(?:\.\d{1,2})?$/;
var ele = document.getElementById("ColumnName");
if(rx.test(ele.value)) {
console.log("true");
}else{
console.log("false");
}
}
</script>
Another solution using addEventListener() instead of onkeyup:
<input type="text" class="form-control" id="ColumnName" name="ColumnName">
<script>
function onlyNumeric(evt) {
var rx = /^\d+(?:\.\d{1,2})?$/;
var ele = document.getElementById("ColumnName");
if(rx.test(ele.value)) {
console.log("true");
}else{
console.log("false");
}
}
var el = document.getElementById("ColumnName");
el.addEventListener("input", onlyNumeric, false);
</script>

Use this jquery plugin it validate decimal behaviour while typing and mouse click
https://github.com/sarkfoundation/Decimal-Behavior
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type='text/javascript' src="https://rawgit.com/sarkfoundation/Decimal-Behavior/master/sark-decimal/sark-decimal.js"></script>
<input type="text" data-behaviour="decimal">

JavaScript/jQuery validation for text box

I have a texbox that is like this:
<input type="text" size="30" name="form[id]" id="form_id">
I need a JavaScript function that will validate:
No Spaces allowed.
Only numbers, letters, dashes(-) and underscores(_) allowed and no other special character allowed.
Shouldn't be empty
On Submit when the user's input is violating a validation. An alert message should be displayed.

With jQuery I'll do something like that :
$('#formId').submit(function(e) {
var validator = new RegExp(/^[\w_-]{1,}$/), //Min 1 char or more
text = $('input[name="form[id]"]').val();
if(validator.test(text))
$(this).submit();
else {
alert('Code not valid');
return false;
}
});
Regular Expressions Cheat Sheet
NB : jsfiddle is down atm, code hasn't been tested

Here is the javascript
<script type="text/javascript">
function NoSpecialChars(){
var element=document.getElementById('form_id');
var specialchars= "!##$%^&*()+=[]\\\';,./{}|\":<>?";
if(element.value.length==0){
alert('Enter some text');
return false;
}
for (var i = 0; i < element.value.length; i++) {
if (specialchars.indexOf(document.formname.fieldname.value.charAt(i)) != -1) {
alert ("Those are not allowed.");
return false;
}
}
return true;
}
</script>
You need to subscribe the onclientclick event of the textbox.
<input type="text" size="30" name="form[id]" id="form_id" onclientclick="return NoSpecialChars();">
Hope it helps

Use JQuery Validation Engine for Validating the Form..
Here is the Link for JQuery Validation