How to validate the form with jquery before the HTML 5 validation
up vote
1
down vote
favorite
I have a form in the Arabic language, i try to validate it with 2 ways: html 5 and j query also.
The problem is the English HTML 5 alert Appears in the first before that the arabic j query alert appears, but in my case i want the opposite with some change.
I want that the arabic j query alert appears in the first, and the HTML 5 English alert appears only if the j query can't stop the Cheating of user.. thanks in advance
<!DOCTYPE HTML>
<html>
<head>
<title>j query_validation</title>
<meta charset="UTF-8">
</head>
<body>
<form id="formId">
<input type="text" class="input-string" required/>
<input type="submit"/>
<p class="alert-error" style="display:
none">can't be empty</p>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script>
$('#formId').submit(function(e){
var inputValue = $('.input-string').val().length;
if(inputValue == 0)
{
$('.alert-error').show();
e.preventDefault();
}
});
</script>
</body>
</html>
jquery html
edited Nov 22 at 16:21
Poul Bak
5,42831132
asked Nov 22 at 15:18
Nassim Nasri
156
add a comment |
up vote
1
down vote
favorite
I have a form in the Arabic language, i try to validate it with 2 ways: html 5 and j query also.
The problem is the English HTML 5 alert Appears in the first before that the arabic j query alert appears, but in my case i want the opposite with some change.
I want that the arabic j query alert appears in the first, and the HTML 5 English alert appears only if the j query can't stop the Cheating of user.. thanks in advance
<!DOCTYPE HTML>
<html>
<head>
<title>j query_validation</title>
<meta charset="UTF-8">
</head>
<body>
<form id="formId">
<input type="text" class="input-string" required/>
<input type="submit"/>
<p class="alert-error" style="display:
none">can't be empty</p>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script>
$('#formId').submit(function(e){
var inputValue = $('.input-string').val().length;
if(inputValue == 0)
{
$('.alert-error').show();
e.preventDefault();
}
});
</script>
</body>
</html>
jquery html
edited Nov 22 at 16:21
Poul Bak
5,42831132
asked Nov 22 at 15:18
Nassim Nasri
156
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
I have a form in the Arabic language, i try to validate it with 2 ways: html 5 and j query also.
The problem is the English HTML 5 alert Appears in the first before that the arabic j query alert appears, but in my case i want the opposite with some change.
I want that the arabic j query alert appears in the first, and the HTML 5 English alert appears only if the j query can't stop the Cheating of user.. thanks in advance
<!DOCTYPE HTML>
<html>
<head>
<title>j query_validation</title>
<meta charset="UTF-8">
</head>
<body>
<form id="formId">
<input type="text" class="input-string" required/>
<input type="submit"/>
<p class="alert-error" style="display:
none">can't be empty</p>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script>
$('#formId').submit(function(e){
var inputValue = $('.input-string').val().length;
if(inputValue == 0)
{
$('.alert-error').show();
e.preventDefault();
}
});
</script>
</body>
</html>
jquery html
edited Nov 22 at 16:21
Poul Bak
5,42831132
asked Nov 22 at 15:18
Nassim Nasri
156
I have a form in the Arabic language, i try to validate it with 2 ways: html 5 and j query also.
The problem is the English HTML 5 alert Appears in the first before that the arabic j query alert appears, but in my case i want the opposite with some change.
I want that the arabic j query alert appears in the first, and the HTML 5 English alert appears only if the j query can't stop the Cheating of user.. thanks in advance
<!DOCTYPE HTML>
<html>
<head>
<title>j query_validation</title>
<meta charset="UTF-8">
</head>
<body>
<form id="formId">
<input type="text" class="input-string" required/>
<input type="submit"/>
<p class="alert-error" style="display:
none">can't be empty</p>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script>
$('#formId').submit(function(e){
var inputValue = $('.input-string').val().length;
if(inputValue == 0)
{
$('.alert-error').show();
e.preventDefault();
}
});
</script>
</body>
</html>
jquery html
jquery html
edited Nov 22 at 16:21
Poul Bak
5,42831132
asked Nov 22 at 15:18
Nassim Nasri
156
edited Nov 22 at 16:21
Poul Bak
5,42831132
asked Nov 22 at 15:18
Nassim Nasri
156
edited Nov 22 at 16:21
Poul Bak
5,42831132
edited Nov 22 at 16:21
Poul Bak
5,42831132
edited Nov 22 at 16:21
Poul Bak
5,42831132
5,42831132
asked Nov 22 at 15:18
Nassim Nasri
156
asked Nov 22 at 15:18
Nassim Nasri
156
asked Nov 22 at 15:18
Nassim Nasri
156
156
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
up vote
2
down vote
accepted
Just put e.preventDefault() at the start of your function.
This prevents any default form submission behaviour. Just remember to actually submit the form if it's successful.
$('#formId').submit(function(e){
e.preventDefault();
var inputValue;
$('.input-string').each(function(){ // If you're checking for class, you may want to include this .each function, as many elements can have the same class. If you switch to ID, this can be removed.
inputValue += $(this).val().length;
}); // End .each
if(inputValue == 0){
$('.alert-error').show();
}
else{
$('.alert-error').hide(); // Not really necessary if you're submitting and refreshing anyway, but it lets the user know it will be submitted successfully, before the page actually refreshed.
form.submit();
}
}); // End .submit
EDIT : Attached below is my the full answer, as per OP's request to fulfil further requirements in comments.
<!DOCTYPE HTML>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<title>j query_validation</title>
<meta charset="UTF-8">
</head>
<body>
<form id="formId">
<input type="text" class="input-string" required/>
<button id="test-button" type="button" role="button">Test Me </button>
<p class="alert-error" style="display:
none">can't be empty</p>
</form>
<script>
$('#test-button').click(function(e) {
e.preventDefault();
var inputValue = 0;
$('.input-string').each(function() { // If you're checking for class, you may want to include this .each function, as many elements can have the same class. If you switch to ID, this can be removed.
inputValue += $(this).val().length;
}); // End .each
// inputValue = 0;
if (inputValue == 0) {
$('.alert-error').each(function() {
$(this).css("display", "block");
});
} else {
$('.alert-error').each(function() {
$(this).css("display", "none"); // Not really necessary if you're submitting and refreshing anyway, but it lets the user know it will be submitted successfully, before the page actually refreshed.
});
$("#formId").submit();
}
}); // End .submit
</script>
</body>
</html>answered Nov 22 at 15:34
cmprogram
1,065519
I think you had a little problem with indentation here...
– Jean-Marc Zimmer
Nov 22 at 15:54
$('.input string') should be $('.input-string')
– abdulsattar-alkhalaf
Nov 22 at 15:55
@AboAlimk Thank you, good catch.
– cmprogram
Nov 22 at 15:58
thanks for your help, but in your code if the user for example make the JavaScript disabled the the html 5 alert doesn't appears and stop the user – cmprogram
– Nassim Nasri
Nov 22 at 16:03
1
@ cmprogram thanks a lot very helpful, i did it: $('button').click(function(e) { e.preventDefault(); var inputValue = $('.input-string').val().length; if(inputValue == 0) { $('.alert-error').show(); } });
– Nassim Nasri
Nov 22 at 16:34
|
show 7 more comments
up vote
1
down vote
there are two errors in your js
$('#formId').submit(function(e){
var inputValue = $('.input string').val().length;
if(inputValue == ''){
$('.alert-error').show();
e.preventDefault();
}
});
length: you cant use int as string
$('.input string'): should be $('.input-string'), you didn't add dash
change it to
$('#formId').submit(function(e){
var inputValue = $('.input-string').val().length;
if(inputValue === 0){
$('.alert-error').show();
e.preventDefault();
}
});
answered Nov 22 at 15:53
abdulsattar-alkhalaf
31715
AboAlimk: thanks brother yes you're right
– Nassim Nasri
Nov 22 at 15:59
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
2
down vote
accepted
Just put e.preventDefault() at the start of your function.
This prevents any default form submission behaviour. Just remember to actually submit the form if it's successful.
$('#formId').submit(function(e){
e.preventDefault();
var inputValue;
$('.input-string').each(function(){ // If you're checking for class, you may want to include this .each function, as many elements can have the same class. If you switch to ID, this can be removed.
inputValue += $(this).val().length;
}); // End .each
if(inputValue == 0){
$('.alert-error').show();
}
else{
$('.alert-error').hide(); // Not really necessary if you're submitting and refreshing anyway, but it lets the user know it will be submitted successfully, before the page actually refreshed.
form.submit();
}
}); // End .submit
EDIT : Attached below is my the full answer, as per OP's request to fulfil further requirements in comments.
<!DOCTYPE HTML>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<title>j query_validation</title>
<meta charset="UTF-8">
</head>
<body>
<form id="formId">
<input type="text" class="input-string" required/>
<button id="test-button" type="button" role="button">Test Me </button>
<p class="alert-error" style="display:
none">can't be empty</p>
</form>
<script>
$('#test-button').click(function(e) {
e.preventDefault();
var inputValue = 0;
$('.input-string').each(function() { // If you're checking for class, you may want to include this .each function, as many elements can have the same class. If you switch to ID, this can be removed.
inputValue += $(this).val().length;
}); // End .each
// inputValue = 0;
if (inputValue == 0) {
$('.alert-error').each(function() {
$(this).css("display", "block");
});
} else {
$('.alert-error').each(function() {
$(this).css("display", "none"); // Not really necessary if you're submitting and refreshing anyway, but it lets the user know it will be submitted successfully, before the page actually refreshed.
});
$("#formId").submit();
}
}); // End .submit
</script>
</body>
</html>answered Nov 22 at 15:34
cmprogram
1,065519
I think you had a little problem with indentation here...
– Jean-Marc Zimmer
Nov 22 at 15:54
$('.input string') should be $('.input-string')
– abdulsattar-alkhalaf
Nov 22 at 15:55
@AboAlimk Thank you, good catch.
– cmprogram
Nov 22 at 15:58
thanks for your help, but in your code if the user for example make the JavaScript disabled the the html 5 alert doesn't appears and stop the user – cmprogram
– Nassim Nasri
Nov 22 at 16:03
1
@ cmprogram thanks a lot very helpful, i did it: $('button').click(function(e) { e.preventDefault(); var inputValue = $('.input-string').val().length; if(inputValue == 0) { $('.alert-error').show(); } });
– Nassim Nasri
Nov 22 at 16:34
|
show 7 more comments
up vote
2
down vote
accepted
Just put e.preventDefault() at the start of your function.
This prevents any default form submission behaviour. Just remember to actually submit the form if it's successful.
$('#formId').submit(function(e){
e.preventDefault();
var inputValue;
$('.input-string').each(function(){ // If you're checking for class, you may want to include this .each function, as many elements can have the same class. If you switch to ID, this can be removed.
inputValue += $(this).val().length;
}); // End .each
if(inputValue == 0){
$('.alert-error').show();
}
else{
$('.alert-error').hide(); // Not really necessary if you're submitting and refreshing anyway, but it lets the user know it will be submitted successfully, before the page actually refreshed.
form.submit();
}
}); // End .submit
EDIT : Attached below is my the full answer, as per OP's request to fulfil further requirements in comments.
<!DOCTYPE HTML>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<title>j query_validation</title>
<meta charset="UTF-8">
</head>
<body>
<form id="formId">
<input type="text" class="input-string" required/>
<button id="test-button" type="button" role="button">Test Me </button>
<p class="alert-error" style="display:
none">can't be empty</p>
</form>
<script>
$('#test-button').click(function(e) {
e.preventDefault();
var inputValue = 0;
$('.input-string').each(function() { // If you're checking for class, you may want to include this .each function, as many elements can have the same class. If you switch to ID, this can be removed.
inputValue += $(this).val().length;
}); // End .each
// inputValue = 0;
if (inputValue == 0) {
$('.alert-error').each(function() {
$(this).css("display", "block");
});
} else {
$('.alert-error').each(function() {
$(this).css("display", "none"); // Not really necessary if you're submitting and refreshing anyway, but it lets the user know it will be submitted successfully, before the page actually refreshed.
});
$("#formId").submit();
}
}); // End .submit
</script>
</body>
</html>answered Nov 22 at 15:34
cmprogram
1,065519
I think you had a little problem with indentation here...
– Jean-Marc Zimmer
Nov 22 at 15:54
$('.input string') should be $('.input-string')
– abdulsattar-alkhalaf
Nov 22 at 15:55
@AboAlimk Thank you, good catch.
– cmprogram
Nov 22 at 15:58
thanks for your help, but in your code if the user for example make the JavaScript disabled the the html 5 alert doesn't appears and stop the user – cmprogram
– Nassim Nasri
Nov 22 at 16:03
1
@ cmprogram thanks a lot very helpful, i did it: $('button').click(function(e) { e.preventDefault(); var inputValue = $('.input-string').val().length; if(inputValue == 0) { $('.alert-error').show(); } });
– Nassim Nasri
Nov 22 at 16:34
|
show 7 more comments
up vote
2
down vote
accepted
up vote
2
down vote
accepted
Just put e.preventDefault() at the start of your function.
This prevents any default form submission behaviour. Just remember to actually submit the form if it's successful.
$('#formId').submit(function(e){
e.preventDefault();
var inputValue;
$('.input-string').each(function(){ // If you're checking for class, you may want to include this .each function, as many elements can have the same class. If you switch to ID, this can be removed.
inputValue += $(this).val().length;
}); // End .each
if(inputValue == 0){
$('.alert-error').show();
}
else{
$('.alert-error').hide(); // Not really necessary if you're submitting and refreshing anyway, but it lets the user know it will be submitted successfully, before the page actually refreshed.
form.submit();
}
}); // End .submit
EDIT : Attached below is my the full answer, as per OP's request to fulfil further requirements in comments.
<!DOCTYPE HTML>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<title>j query_validation</title>
<meta charset="UTF-8">
</head>
<body>
<form id="formId">
<input type="text" class="input-string" required/>
<button id="test-button" type="button" role="button">Test Me </button>
<p class="alert-error" style="display:
none">can't be empty</p>
</form>
<script>
$('#test-button').click(function(e) {
e.preventDefault();
var inputValue = 0;
$('.input-string').each(function() { // If you're checking for class, you may want to include this .each function, as many elements can have the same class. If you switch to ID, this can be removed.
inputValue += $(this).val().length;
}); // End .each
// inputValue = 0;
if (inputValue == 0) {
$('.alert-error').each(function() {
$(this).css("display", "block");
});
} else {
$('.alert-error').each(function() {
$(this).css("display", "none"); // Not really necessary if you're submitting and refreshing anyway, but it lets the user know it will be submitted successfully, before the page actually refreshed.
});
$("#formId").submit();
}
}); // End .submit
</script>
</body>
</html>answered Nov 22 at 15:34
cmprogram
1,065519
Just put e.preventDefault() at the start of your function.
This prevents any default form submission behaviour. Just remember to actually submit the form if it's successful.
$('#formId').submit(function(e){
e.preventDefault();
var inputValue;
$('.input-string').each(function(){ // If you're checking for class, you may want to include this .each function, as many elements can have the same class. If you switch to ID, this can be removed.
inputValue += $(this).val().length;
}); // End .each
if(inputValue == 0){
$('.alert-error').show();
}
else{
$('.alert-error').hide(); // Not really necessary if you're submitting and refreshing anyway, but it lets the user know it will be submitted successfully, before the page actually refreshed.
form.submit();
}
}); // End .submit
EDIT : Attached below is my the full answer, as per OP's request to fulfil further requirements in comments.
<!DOCTYPE HTML>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<title>j query_validation</title>
<meta charset="UTF-8">
</head>
<body>
<form id="formId">
<input type="text" class="input-string" required/>
<button id="test-button" type="button" role="button">Test Me </button>
<p class="alert-error" style="display:
none">can't be empty</p>
</form>
<script>
$('#test-button').click(function(e) {
e.preventDefault();
var inputValue = 0;
$('.input-string').each(function() { // If you're checking for class, you may want to include this .each function, as many elements can have the same class. If you switch to ID, this can be removed.
inputValue += $(this).val().length;
}); // End .each
// inputValue = 0;
if (inputValue == 0) {
$('.alert-error').each(function() {
$(this).css("display", "block");
});
} else {
$('.alert-error').each(function() {
$(this).css("display", "none"); // Not really necessary if you're submitting and refreshing anyway, but it lets the user know it will be submitted successfully, before the page actually refreshed.
});
$("#formId").submit();
}
}); // End .submit
</script>
</body>
</html><!DOCTYPE HTML>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<title>j query_validation</title>
<meta charset="UTF-8">
</head>
<body>
<form id="formId">
<input type="text" class="input-string" required/>
<button id="test-button" type="button" role="button">Test Me </button>
<p class="alert-error" style="display:
none">can't be empty</p>
</form>
<script>
$('#test-button').click(function(e) {
e.preventDefault();
var inputValue = 0;
$('.input-string').each(function() { // If you're checking for class, you may want to include this .each function, as many elements can have the same class. If you switch to ID, this can be removed.
inputValue += $(this).val().length;
}); // End .each
// inputValue = 0;
if (inputValue == 0) {
$('.alert-error').each(function() {
$(this).css("display", "block");
});
} else {
$('.alert-error').each(function() {
$(this).css("display", "none"); // Not really necessary if you're submitting and refreshing anyway, but it lets the user know it will be submitted successfully, before the page actually refreshed.
});
$("#formId").submit();
}
}); // End .submit
</script>
</body>
</html><!DOCTYPE HTML>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<title>j query_validation</title>
<meta charset="UTF-8">
</head>
<body>
<form id="formId">
<input type="text" class="input-string" required/>
<button id="test-button" type="button" role="button">Test Me </button>
<p class="alert-error" style="display:
none">can't be empty</p>
</form>
<script>
$('#test-button').click(function(e) {
e.preventDefault();
var inputValue = 0;
$('.input-string').each(function() { // If you're checking for class, you may want to include this .each function, as many elements can have the same class. If you switch to ID, this can be removed.
inputValue += $(this).val().length;
}); // End .each
// inputValue = 0;
if (inputValue == 0) {
$('.alert-error').each(function() {
$(this).css("display", "block");
});
} else {
$('.alert-error').each(function() {
$(this).css("display", "none"); // Not really necessary if you're submitting and refreshing anyway, but it lets the user know it will be submitted successfully, before the page actually refreshed.
});
$("#formId").submit();
}
}); // End .submit
</script>
</body>
</html>answered Nov 22 at 15:34
cmprogram
1,065519
edited Nov 22 at 16:42
answered Nov 22 at 15:34
cmprogram
1,065519
answered Nov 22 at 15:34
cmprogram
1,065519
answered Nov 22 at 15:34
cmprogram
1,065519
1,065519
I think you had a little problem with indentation here...
– Jean-Marc Zimmer
Nov 22 at 15:54
$('.input string') should be $('.input-string')
– abdulsattar-alkhalaf
Nov 22 at 15:55
@AboAlimk Thank you, good catch.
– cmprogram
Nov 22 at 15:58
thanks for your help, but in your code if the user for example make the JavaScript disabled the the html 5 alert doesn't appears and stop the user – cmprogram
– Nassim Nasri
Nov 22 at 16:03
1
@ cmprogram thanks a lot very helpful, i did it: $('button').click(function(e) { e.preventDefault(); var inputValue = $('.input-string').val().length; if(inputValue == 0) { $('.alert-error').show(); } });
– Nassim Nasri
Nov 22 at 16:34
|
show 7 more comments
I think you had a little problem with indentation here...
– Jean-Marc Zimmer
Nov 22 at 15:54
$('.input string') should be $('.input-string')
– abdulsattar-alkhalaf
Nov 22 at 15:55
@AboAlimk Thank you, good catch.
– cmprogram
Nov 22 at 15:58
thanks for your help, but in your code if the user for example make the JavaScript disabled the the html 5 alert doesn't appears and stop the user – cmprogram
– Nassim Nasri
Nov 22 at 16:03
1
@ cmprogram thanks a lot very helpful, i did it: $('button').click(function(e) { e.preventDefault(); var inputValue = $('.input-string').val().length; if(inputValue == 0) { $('.alert-error').show(); } });
– Nassim Nasri
Nov 22 at 16:34
I think you had a little problem with indentation here...
– Jean-Marc Zimmer
Nov 22 at 15:54
I think you had a little problem with indentation here...
– Jean-Marc Zimmer
Nov 22 at 15:54
$('.input string') should be $('.input-string')
– abdulsattar-alkhalaf
Nov 22 at 15:55
$('.input string') should be $('.input-string')
– abdulsattar-alkhalaf
Nov 22 at 15:55
@AboAlimk Thank you, good catch.
– cmprogram
Nov 22 at 15:58
@AboAlimk Thank you, good catch.
– cmprogram
Nov 22 at 15:58
thanks for your help, but in your code if the user for example make the JavaScript disabled the the html 5 alert doesn't appears and stop the user – cmprogram
– Nassim Nasri
Nov 22 at 16:03
thanks for your help, but in your code if the user for example make the JavaScript disabled the the html 5 alert doesn't appears and stop the user – cmprogram
– Nassim Nasri
Nov 22 at 16:03
1
1
@ cmprogram thanks a lot very helpful, i did it: $('button').click(function(e) { e.preventDefault(); var inputValue = $('.input-string').val().length; if(inputValue == 0) { $('.alert-error').show(); } });
– Nassim Nasri
Nov 22 at 16:34
@ cmprogram thanks a lot very helpful, i did it: $('button').click(function(e) { e.preventDefault(); var inputValue = $('.input-string').val().length; if(inputValue == 0) { $('.alert-error').show(); } });
– Nassim Nasri
Nov 22 at 16:34
|
show 7 more comments
up vote
1
down vote
there are two errors in your js
$('#formId').submit(function(e){
var inputValue = $('.input string').val().length;
if(inputValue == ''){
$('.alert-error').show();
e.preventDefault();
}
});
length: you cant use int as string
$('.input string'): should be $('.input-string'), you didn't add dash
change it to
$('#formId').submit(function(e){
var inputValue = $('.input-string').val().length;
if(inputValue === 0){
$('.alert-error').show();
e.preventDefault();
}
});
answered Nov 22 at 15:53
abdulsattar-alkhalaf
31715
AboAlimk: thanks brother yes you're right
– Nassim Nasri
Nov 22 at 15:59
add a comment |
up vote
1
down vote
there are two errors in your js
$('#formId').submit(function(e){
var inputValue = $('.input string').val().length;
if(inputValue == ''){
$('.alert-error').show();
e.preventDefault();
}
});
length: you cant use int as string
$('.input string'): should be $('.input-string'), you didn't add dash
change it to
$('#formId').submit(function(e){
var inputValue = $('.input-string').val().length;
if(inputValue === 0){
$('.alert-error').show();
e.preventDefault();
}
});
answered Nov 22 at 15:53
abdulsattar-alkhalaf
31715
AboAlimk: thanks brother yes you're right
– Nassim Nasri
Nov 22 at 15:59
add a comment |
up vote
1
down vote
up vote
1
down vote
there are two errors in your js
$('#formId').submit(function(e){
var inputValue = $('.input string').val().length;
if(inputValue == ''){
$('.alert-error').show();
e.preventDefault();
}
});
length: you cant use int as string
$('.input string'): should be $('.input-string'), you didn't add dash
change it to
$('#formId').submit(function(e){
var inputValue = $('.input-string').val().length;
if(inputValue === 0){
$('.alert-error').show();
e.preventDefault();
}
});
answered Nov 22 at 15:53
abdulsattar-alkhalaf
31715
there are two errors in your js
$('#formId').submit(function(e){
var inputValue = $('.input string').val().length;
if(inputValue == ''){
$('.alert-error').show();
e.preventDefault();
}
});
length: you cant use int as string
$('.input string'): should be $('.input-string'), you didn't add dash
change it to
$('#formId').submit(function(e){
var inputValue = $('.input-string').val().length;
if(inputValue === 0){
$('.alert-error').show();
e.preventDefault();
}
});
answered Nov 22 at 15:53
abdulsattar-alkhalaf
31715
answered Nov 22 at 15:53
abdulsattar-alkhalaf
31715
answered Nov 22 at 15:53
abdulsattar-alkhalaf
31715
answered Nov 22 at 15:53
abdulsattar-alkhalaf
31715
31715
AboAlimk: thanks brother yes you're right
– Nassim Nasri
Nov 22 at 15:59
add a comment |
AboAlimk: thanks brother yes you're right
– Nassim Nasri
Nov 22 at 15:59
AboAlimk: thanks brother yes you're right
– Nassim Nasri
Nov 22 at 15:59
AboAlimk: thanks brother yes you're right
– Nassim Nasri
Nov 22 at 15:59
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53433961%2fhow-to-validate-the-form-with-jquery-before-the-html-5-validation%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
