Develop Reference

JQ and Js how to Validate content null (Spacebar)

My JS Here:
$('input[type=submit]').click(function () {
var val = $('#message_content').sceditor('instance').val();
if( val == "" || !val ) {
alert('Content Cannot Null');
return false;
}
return true;
});
I have one question:
How to validate? If all content is " "(Spacebar) or "　　　"(full code Spacebar)...Judgment the content is null?

$('input[type=submit]').click(function () {
var val = $.trim($('#message_content').sceditor('instance').val());
if(!val) {
alert('Content Cannot Null');
return false;
}
return true;
});
You can try this.

Trim the whitespace from the input and then check it against ""

jQuery: Compact way to fetch values of all input fields?

I have a form with five input fields and a register button ('.register').
I want to enable the register button ONLY IF all fields have at least one character.
Here comes my code:
$(document).ready(function() {
// when page loads
$('.register').addClass('a_unclickable');
// Input validation
// Are all fields filled out?
$('input').on('keyup', function() {
var un_value = $('#username_operators').val();
var fn_value = $('#first_name_operators').val();
var ln_value = $('#last_name_operators').val();
var e_value = $('#email_operators').val();
var pw_value = $('#password_operators').val();
var pw_r_value = $('#password_repeat_operators').val();
if ((un_value.length > 0) && (fn_value.length > 0) && (ln_value.length > 0) && (e_value.length > 0) && (e_value.indexOf('#') !== -1) && (pw_value.length > 0) && (pw_r_value.length > 0)) {
$('.register').removeClass('a_unclickable');
} else {
$('.register').addClass('a_unclickable');
}
})
});
I have the feeling that there is a much easier way to achieve the same result. Does anyone of you have a compact suggestion?

That's quiet compact:
$(document).ready(function() {
// when page loads
$('.register').addClass('a_unclickable');
// Input validation
// Are all fields filled out?
$('input').on('keyup', function() {
$('.register').removeClass('a_unclickable');
$('input').each(function() {
if ($(this).val() === '') {
$('.register').addClass('a_unclickable');
}
});
})
});

A couple of things come to mind. First:
$('input').on('keyup', function() {
var valid = true;
$('#username_operators, #first_name_operators, #last_name_operators, #email_operators, #password_operators, #password_repeat_operators').each(function() {
if (/^\s*$/.test(this.value)) {
valid = false;
}
});
if (valid) {
$('.register').removeClass('a_unclickable');
}
else {
$('.register').addClass('a_unclickable');
}
});
You can combine all the Ids into one CSS selector. Really the cleanest way is to add a class name to each required input, then utilize event.target.form to find all required fields inside the form.
$('input').on('keyup', function(event) {
var valid = true;
$(event.target.form).find(".required").each(function() {
if (/^\s*$/.test(this.value)) {
valid = false;
}
});
if (valid) {
$('.register').removeClass('a_unclickable');
}
else {
$('.register').addClass('a_unclickable');
}
});

Wrap the inputs in a <div class="verifyLength" ></div>
Add the a_unclickable class to the register field by default.
Then jquery:
$('input').on('keyup', function() {
var emptyField = false;
$(".verfyLength").find("input").each(function()
{
if((this).val().length() <=0)
emptyField = true;
});
if(emptyField)
$('.register').addClass('a_unclickable');
else
$('.register').removeClass('a_unclickable');
});

Here you go JSFiddle
var arr = [un_value, fn_value, ln_value, e_value, pw_value, pw_r_value];
$.each(arr,function(i,item){ if(item.length > 0){
$('.register').removeClass('a_unclickable');
} else {
$('.register').addClass('a_unclickable');
}})
if you are able to read all the values with selector you could pass them
like:
$.each($('input'),function(i,item){ if($(item).val().length > 0){
$('.register').removeClass('a_unclickable');
} else {
$('.register').addClass('a_unclickable');
}})

Have a look at this jsfiddle:
var i = 0, count = 0;
$.each($( ":input" ), function( index, value ) {
if(value.value.length > 0) {
count++;
}
});
if(count === 6) {
console.log(true);
} else {
console.log(false)
}

Validate Input for time only works if I attached a break point in chrome debugger

I have some code I want to validate the input, i want to create my own Validator for time rather then using the time type on input as I'm also styling it.
However the current code allows none desired characters [A-Z] to be parsed expect for when I put a break point on the if statement.
Want to add to this to convert the value to always be formatted time (00:00 and 25:93 > 23:59)
window.validateTimeInput = function(evt) {
var e = evt || window.event,
key = e.keyCode || e.which,
keyChar = String.fromCharCode(key),
regexChars = /[0-9]|\:/,
regexActions = /37|38|39|40|46|27|13|8/; // Left, Up, Right, Down, Delete, Escape, Enter, Backspace
// BREAK POINT HERE
if( ( regexChars.test(keyChar) ? false : !regexActions.test(key.toString()) ) && e.target.value.length >= 5 ){
e.returnValue = false;
if(e.preventDefault()) e.preventDefault();
//return false;
}
};
<input type="text" onkeydown="validateTimeInput();"/>
example :
http://jsfiddle.net/labithiotis/YSgUk/1/

The problem is your regex: /37|38|39|40|46|27|13|8/. It is too lenient.
It allows the letter "r", keycode 82. Because /8/ allows the string "82". (Also allows the letters dnpqrstuvwxyDNPQRSTUVWXY.)
Change your regex to this:
/^(37|38|39|40|46|27|13|8)$/

Try pulling that line out of the if statement and see if that helps narrow things down. You could also split your checks up a bit more instead of trying to run them all in one line.
$foo = regexChars.test(keyChar) ? false : !regexActions.test(key.toString();
if($foo){
...
}

<?php
// $hd = curl_init("http://www.laleo.com/ebooks_android/ebooks_search_json.php");
// curl_setopt($hd,CURLOPT_POSTFIELDS,"query=deporte");
// curl_exec($hd);
// curl_close($hd);
?>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
var regexp1 = /^[0-2]{1}/;
var regexp2 = /^[0-9]{2}/;
var regexp3 = /^[0-9]{2}\:{1}/;
var regexp4 = /^[0-9]{2}\:{1}[0-5]{1}/;
var regexp5 = /^[0-9]{2}\:{1}[0-9]{2}$/;
$(function(){
$(":text").keyup(function(evt){
var curent = $(this);
if(curent.val().length == 1)
{
if(regexp1.test(curent.val()))
{
}
else
{
curent.val("");
}
}
else if(curent.val().length == 2)
{
if(regexp2.test(curent.val()) && curent.val() < 24)
{
}
else
{
curent.val(curent.val().slice(0,1));
}
}
else if(curent.val().length == 3)
{
if(regexp3.test(curent.val()))
{
}
else
{
curent.val(curent.val().slice(0,2));
}
}
else if(curent.val().length == 4)
{
if(regexp4.test(curent.val()))
{
}
else
{
curent.val(curent.val().slice(0,3));
}
}
else if(curent.val().length == 5)
{
if(regexp5.test(curent.val()))
{
}
else
{
curent.val(curent.val().slice(0,4));
}
}
else if(curent.val().length > 5)
{
curent.val(curent.val().slice(0,5));
}
});
});
</script>
</head>
<body>
<input type="text" />
</body>
</html>

Validate input value before it is shown to user

I have an html <input> and some pattern (e.g. -?\d*\.?\d* float-signed value).
I should prevent typing the not matched value.
I did it in next way
jQuery.fn.numeric = function (pattern)
{
var jqElement = $(this), prevValue;
jqElement.keydown(function()
{
prevValue = jqElement.val();
})
jqElement.keyup(function(e)
{
if (!pattern.test(jqElement.val()))
{
jqElement.val(prevValue);
e.preventDefault();
}
prevValue = ""
})
};
JSFiddle DEMO
But in this case, value is shown to user and then corrected to right value.
Is it way to vaidate value before it is shown to user?
I can use pattern attribute from html5

$("#validateMe").on('keydown', function() {
var charBeingTyped = String.fromCharCode(e.charCode || e.which); // get character being typed
var cursorPosition = $(this)[0].selectionStart; // get cursor position
// insert char being typed in our copy of the value of the input at the position of the cursor.
var inValue = $(this).value().substring(0, cursorPosition) + charBeingTyped + $(this).value().substring(cursorPosition, $(this).value().length);
if(inValue.match(/-?\d*\.?\d*/)) return true;
else return false;
});

How about this POJS, I'm using a cross-browser addEvent function instead of jquery and not using any regexs, but I believe it achieves what you are looking for. Pressing + or - changes the sign of the value.
HTML
<input id="test" type="text" />
Javascript
/*jslint maxerr: 50, indent: 4, browser: true */
(function () {
"use strict";
function addEvent(elem, event, fn) {
if (typeof elem === "string") {
elem = document.getElementById(elem);
}
function listenHandler(e) {
var ret = fn.apply(null, arguments);
if (ret === false) {
e.stopPropagation();
e.preventDefault();
}
return ret;
}
function attachHandler() {
window.event.target = window.event.srcElement;
var ret = fn.call(elem, window.event);
if (ret === false) {
window.event.returnValue = false;
window.event.cancelBubble = true;
}
return ret;
}
if (elem.addEventListener) {
elem.addEventListener(event, listenHandler, false);
} else {
elem.attachEvent("on" + event, attachHandler);
}
}
function verify(e) {
var target = e.target, // shouldn't be needed: || e.srcElement;
value = target.value,
char = String.fromCharCode(e.keyCode || e.charCode);
if (value.charAt(0) === "-") {
if (char === "+") {
e.target.value = value.slice(1);
}
} else if (char === "-") {
e.target.value = char + value;
return false;
}
value += char;
return parseFloat(value) === +value;
}
addEvent("test", "keypress", verify);
}());
On jsfiddle
I think I used the correct values keyCode || charCode
but you may want to search and check. A summary of the correct ones are available here

You could use this code to find out what character is pressed. Validate that character and, if it validates, append it to the input field.

Try this code:
jQuery.fn.numeric = function (pattern)
{
$(this).keypress(function(e)
{
var sChar = String.fromCharCode(!e.charCode ? e.which : event.charCode);
e.preventDefault();
var sPrev = $(this).val();
if(!pattern.test(sChar)){
return false;
} else {
sPrev = sPrev + sChar;
}
$(this).val(sPrev);
});
};
$("#validateId").numeric(/^-?\d*\.?\d*$/);
jsfiddle.net/aBNtH/
UPDATE:
My example validates each charachter while typing. If you prefer to check the entire value of the input field instead, I would suggest to validate the value on an other Event, like Input blur().

SlickGrid- Need of insensitive case filter

Is there's a way to change the filter from sensitive case to insensitive?
Thank you.

Here’s the relevant section of a working example using the DataView filter. Notice the searchString variable is converted to lowercase when the value is first defined and then it's compared to lowercase strings within the myFilter function.
function myFilter(item, args) {
if (args.searchString != "" && item["FirstName"].toLowerCase().indexOf(args.searchString) == -1 && item["LastName"].toLowerCase().indexOf(args.searchString) == -1) {
return false;
}
return true;
}
....
$("#txtSearch").keyup(function (e) {
Slick.GlobalEditorLock.cancelCurrentEdit();
// clear on Esc
if (e.which == 27) {
this.value = "";
}
searchString = this.value.toLowerCase();
updateFilter();
});
function updateFilter() {
dataView.setFilterArgs({
searchString: searchString
});
dataView.refresh();
}
// initialize the model after all the events have been hooked up
dataView.beginUpdate();
dataView.setItems(data);
dataView.setFilterArgs({
searchString: searchString
});
dataView.setFilter(myFilter);
dataView.endUpdate();

Guessing you are talking about the DataView filter, the implementation of the filter functionality is totally up to you. Note the filter function used in the SlickGrid examples - that function is set as the filter using dataView.setFilter(your_function_here). So implement the filter function as you want and set it to the dataView

function filter(item) {
// String Should Match Each Other
/* for (var columnId in columnFilters) {
if (columnId !== undefined && columnFilters[columnId] !== "") {
var c = grid.getColumns()[grid.getColumnIndex(columnId)];
if (item[c.field] != columnFilters[columnId]) {
return false;
}
}
} */
for (var columnId in columnFilters) {
if (columnId !== undefined && columnFilters[columnId] !== "") {
var c = grid.getColumns()[grid.getColumnIndex(columnId)];
// This Case Sensitive
//if (!(item[c.field] && (""+item[c.field]).indexOf(columnFilters[columnId]) !== -1)) {
if (!(item[c.field] && (""+item[c.field].toLowerCase()).indexOf(columnFilters[columnId].toLowerCase()) !== -1)) {
// Case in-Sensitive
return false;
}
}
}
return true;
}