Hi there is there possible to validate the input tag with url type?
I currently have an input tag with URL type for user to key in the url, it is okay if the user key in value that is not a url.
But when user key in "http://www.", my input field accept it and posted the form to the server which is not a proper value. How to check the empty value in the input field to validate empty url?
Here are few scenario my form accepted the url link with empty url:
Is there any way to validate and stop the form to submit when there are empty value in the url link with javascript or php? thanks
My FORM's CODE:
<form class="form" id="form" action="" method="POST" enctype="multipart/form-data">
<div class="box-body">
<input type="hidden" name="banner_id" value="1"></input>
<div class="form-group" >
<label for="bannerName">Banner Name 旗帜名称</label>
<input type="text" class="form-control" name="bannerName" id="bannerName" placeholder="Please Enter Name" onChange="checkDisabled(testing);">
</div>
<div class="form-group" >
<label for="bannerUrl">Banner URL </label>
<input type="url" autocomplete="on" class="form-control" name="bannerUrl" id="bannerUrl" placeholder="Please Enter Url" onChange="checkDisabled(testing);" required>
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="uploaded_file" name="uploaded_file" onChange="checkDisabled(testing);"><br>
<p class="help-block">Your picture size not more than 2MB. (Only JPEG or JPG is allowed)</p>
</div>
<div class="checkbox">
<button id="testing" type="submit" class="btn btn-primary" disabled>Update</button>
</div>
</div><!-- /.box-body -->
</form> <!-- Date range -->
If I'm not wrong to understand your question then this will work for you.
Form page
<div class="form-group" >
<label for="bannerUrl">Banner URL </label>
<input type="url" autocomplete="on" class="form-control" name="bannerUrl" id="bannerUrl" placeholder="Please Enter Url" onChange="checkDisabled(testing);" required>
<span class="error_label"></span>
</div>
jQuery Way
$('#form').validate({
rules : {
bannerUrl : {
required : true,
url : true
}
},
messages : {
bannerUrl : {
required : "This field is required",
url : "Please enter valid URL"
}
},
submitHandler: function(form) {
if ($(form).valid())
form.submit();
return false; // prevent normal form posting
},
errorPlacement: function(error, element) {
$(element).closest('span').find('.error_label').html(error);
}
})
Regex Way
$('#bannerUrl').on('keyup', function (e) {
var checkUrl = checkWebUrl($(this).val());
console.log(checkUrl);
if (!checkUrl) {
// your error message
alert('Please enter valid url');
return false;
} else {
// your message
alert('Valid url')
}
});
function checkWebUrl(url)
{
//regular expression for URL
//console.log(learnRegExp('http://www.google-com.123.com')); // true
//console.log(learnRegExp('http://www.google-com.123')); // false
//console.log(learnRegExp('https://www.google-com.com')); // true
//console.log(learnRegExp('http://google-com.com')); // true
//console.log(learnRegExp('http://google.com')); //true
//console.log(learnRegExp('google.com')); //false
//console.log(learnRegExp('www.google')); //false
//console.log(learnRegExp('http://www.google')); //false
var urlregex = new RegExp(
"^(http:\/\/www.|https:\/\/www.|ftp:\/\/www.|www.){1}([0-9A-Za-z]+\.)");
return urlregex.test(checkWebUrl.arguments[0]);
}
You can use following regex to validate URL.
_^(?:(?:https?|ftp)://)(?:\S+(?::\S*)?@)?(?:(?!10(?:\.\d{1,3}){3})(?!127(?:\.\d{1,3}){3})(?!169\.254(?:\.\d{1,3}){2})(?!192\.168(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\x{00a1}-\x{ffff}0-9]+-?)*[a-z\x{00a1}-\x{ffff}0-9]+)(?:\.(?:[a-z\x{00a1}-\x{ffff}0-9]+-?)*[a-z\x{00a1}-\x{ffff}0-9]+)*(?:\.(?:[a-z\x{00a1}-\x{ffff}]{2,})))(?::\d{2,5})?(?:/[^\s]*)?$_iuS
If the url matches with the above regex then with high probability the given url is valid syntactically. If you don't want such a lengthy and full proof way then you can choose one of the regex from URL Valid Regex.
If you want to modify the regex based on your requirement, please test regex and then proceed.
var urlexp = new RegExp('(http|ftp|https)://[a-z0-9\-_]+(\.[a-z0-9\-_]+)+([a-z0-9\-\.,@\?^=%&;:/~\+#]*[a-z0-9\-@\?^=%&;/~\+#])?', 'i');
Use this regex in javascript, if valid pass the value back to php else post an alert saying error.
Pass the input field value to this function on a if condition it will return true or false
<script>
function isValidUrl(url) {
var regexp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)? (\/|\/([\w#!:.?+=&%@!\-\/]))?/
return regexp.test(url);
}
isValidUrl(yourURL);
</script>
You can use the jQuery Form Validation. (You can import jQuery Validation in your application and use it for all your form fields).
$('#form').validate({
rules : {
'bannerUrl' : {
required : true,
url : true
}
},
messages : {
'bannerUrl' : {
required : "This field is required",
url : "Please enter valid URL"
}
},
})