I'm looking to validate a URL without requiring the user to enter "http://". How it is in the form below, "http://" must be entered for the form to be submitted. I can't figure out how to do this. Any help would be much appreciated.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Makes "field" required and a url.</title>
<link rel="stylesheet" href="http://jquery.bassistance.de/validate/demo/site-demos.css">
</head>
<body>
<form id="myform">
<label for="field">Required, URL: </label>
<input class="left" id="field" name="field">
<br/>
<input type="submit" value="Validate!">
</form>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
<script src="http://jquery.bassistance.de/validate/additional-methods.js"></script>
<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$( "#myform" ).validate({
rules: {
field: {
required: true,
url: true
}
}
});
</script>
</body>
</html>
Edit: Took isherwood's advice:
var txt = $('#website').val();
var http = txt.indexOf('http://');
if (http > -1) {
$('#website').val(txt);
} else {
$('#website').val('http://' + txt);
}
Why not add it to the URL for your users? A URL isn't a URL without a protocol anyway (the exception being protocolless URLs, but they still have '//').
$('#myform').on('submit', function() {
var myURL = 'http://' + $('#field').val();
$('#field').val(myURL);
});
you can use addmethod with REGEX, just add the class from the method to your input
http://jqueryvalidation.org/jQuery.validator.addMethod/
Related
I'm trying to make a simple register/login system but when I press the button for both, it doesn't do what I need it to do.
I put
alert("I work!");
at the beginning of each function supposed to work to see if it actually gets triggered but it doesn't. I also checked if the onclick events for both are referenced correctly and they are. I even tried to copy the actual scripts into the html file to ensure that it's not a reference issue. At this point, I'm really stuck, and if this is some syntax error, it doesn't alert me and I'm not aware of any.
The codes are:
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Opportunities</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/js/script.js"></script>
</head>
<body>
<p>Uwu</p>
<form>
<p>Username <input type="text" class="username" /></p>
<p>Password <input type="password" class="password" /></p>
<button onclick="loginUser()">Login</button>
</form>
<p>Not yet registered? Click here to create an account. </p>
</body>
</html>
registration.html:
<!DOCTYPE html>
<html>
<head>
<title>Register</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src=/js/script.js"></script>
</head>
<body>
<p>Registration page</p>
<form>
<p>Username <input type="text" class="username" /></p>
<p>Password <input type="password" class="password" /></p>
<button onclick="registerUser()">Register</button>
<!--onclick event doesn't work-->
</form>
<p>Click here to go back.</p>
</body>
</html>
and script.js:
var url = "http://localhost:8888";
function test(){
console.log('hello');
}
function registerUser(){
alert("I work!");
var username = document.getElementbyClassName("username");
var password = document.getElementbyClassName("password");
$.ajax{(
url: url + "/register",
method: "post",
data: {
username: username[0].value,
password: password[0].value
}
success: function(respons){
alert(response.message);
}
}).error(function(response){
alert(response.message);
});
}
function loginUser(){
alert("I work!");
var username = document.getElementbyClassName("username");
var password = document.getElementbyClassName("password");
$.ajax({
url: url + "/login",
method: "post",
data: {
username: username[0].value,
password: password[0].value
}
}).success(function(response){
alert(response.message);
}).error(function(response){
alert(response.message);
});
}
Whenever I press the buttons for each, it just clears the texts in my inputs but doesn't launch an alert like I intend to. Please do tell me what I should check regarding this. Thank you.
I think your script is not loaded
Remove the frist backslash ('/') from
<script type="text/javascript" src=/js/script.js"></script>
If you are using your browser I would try first that you dont have any "popup" script blocking extensions, I had the same issue and the issue was chrome popup js blocker cause simple adblocker doesnt work for some sites.
cheers
Looks like a typo in the registerUser() function try changing the ajax call to
$.ajax({
url: url + "/register",
method: "post",
data: {
username: username[0].value,
password: password[0].value
},
success: function(respons){
alert(response.message);
}
}).error(function(response){
alert(response.message);
});
I have created a form in which on submitting name my url is getting redirected but i want after form action it should get redirect to my mobile validation page. after putting the code, i want it to show the offer page. I am not able to write ajax. my function is not getting called. here is what i have tried till now
http://plnkr.co/edit/3DA7YGb58BgcVcD0d10f?p=preview
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<form name="msform" action="another.html" method="post" id="msform">
<input name="name" type="text" placeholder="First Name" />
<input class="bl" id="submitbl" type="submit" value="Submit" />
</form>
<script type="text/javascript">
$("#submitbl").click(function(){
if($("#msform").valid() === true) {
var name = $('input[name|="name"]').val();
//use ajax to run the check
$.ajax({
type : 'POST',
url : 'mobile.html',
success: function(responseText){
resp = responseText.trim().substring(14);
if(resp == 'qualified') {
url_redirect({url: "offer.html",
method: "post",
data: { "fname": name }
});
}
}
});
}
});
</script>
</body>
</html>
For this you can do something like:
write a jQuery onsubmit function and trigger click event for submit button.
$("#msform").on('submit',function(){
$("#submitbl").trigger('click');
});
Or
submit your form through ajax and in success function redirect to mobile.html
I already used huge time for this in stack overflow and googling.But none of it worked for me.
I have a form in html and i need to send the data to a php without leaving the page.I used ajax and javascript.I can POST data by leaving the page but i don't want to leave the page.
here is my html:
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/topcoat-mobile-light.css" />
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<script src = "js/jquery.js"></script>
<script type="text/javascript" src = "js/index.js"></script>
<meta name="msapplication-tap-highlight" content="no" />
<title>Title</title>
</head>
<body>
<div class="topcoat-navigation-bar">
<div class="topcoat-navigation-bar__item center full">
<h1 class="topcoat-navigation-bar__title">Header</h1>
</div>
</div>
<div class = "content text-input">
<form id = "form" name = "form" action="http://localhost/index.php" method = "post">
<p>Please fill the details.
<p> Name</p>
<input type="text" class="topcoat-text-input" placeholder="text" value="" id = "name" name = "name">
<input id = "submit" type="submit" class="topcoat-button" value = "Submit">
</form>
<script type="text/javascript">
var frm = $('#form');
frm.submit(function (ev) {
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
data: frm.serialize(),
success: function (data) {
alert('ok');
}
});
ev.preventDefault();
});
</script>
</div>
</body>
</html>
I can access "name" in php through post by leaving page, So I am not posting php here. Any Help would be highly appreciated. if anybody needs clarification i am here.
While your inputs have an id, they don't have a name attribute. Serialize uses the name to create the key value pairs for the data.
See: http://api.jquery.com/serialize/
Note: Only "successful controls" are serialized to the string. No submit button value is serialized since the form was not submitted using a button. For a form element's value to be included in the serialized string, the element must have a name attribute. Values from checkboxes and radio buttons (inputs of type "radio" or "checkbox") are included only if they are checked. Data from file select elements is not serialized.
Change your inputs to:
<input type="text" class="topcoat-text-input" placeholder="text" value="" id="name" name="name"/>
you should put target attribute in youre form so it will look like that:
<form id = "form" name = "form" action="http://localhost/index.php" method = "post" target="some_name">
and to put "some_name" as an iframe
<iframe id="some_name" name="some_name" style="display:none position:absulote; z-index:-100"></iframe>
that should do the job
Change the script part with this piece of code.... you need to call ev.preventDefault(); before ajax call....
<script type="text/javascript">
var frm = $('#form');
frm.submit(function (ev) {
ev.preventDefault();
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
data: frm.serialize(),
success: function (data) {
alert('ok');
}
});
});
</script>
I think there may be some mistake in javascript file <script src = "js/jquery.js"></script>. I have tried your code. Its working when I changed the javascript file. plz try with <script src = "http://code.jquery.com/jquery-1.11.0.min.js"></script> It has been worked for me.
I don't know how but this worked for me.Thanks for answers.
the html form worked when i place it at the same directory where index.php resides(ie at localhost:/).
if it is at another place It didn't work.I don't know why but I am figuring it out.
What you need is in here
http://malsup.com/jquery/form/
It submits the whole form and won't leave the current page.
I want to upload file using jQuery, but I am getting an exception saying undefined is not a function at $('#myFile').ajaxForm({
HTML
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="jquery-1.11.1.min.js"></script>
<script src="x.js"></script>
</head>
<body>
<form enctype="multipart/form-data" action="/FileUploadUI5/upload"
method="POST" id="myFile">
<input type=file name=upfile><br> <input type="submit"
name="Upload" value="Upload" id="ubutton" />
</form>
</body>
</html>
X.js
$(document).ready(function() {
$(function() {
$('#myFile').ajaxForm({
beforeSend : function() {
},
uploadProgress : function(event, position, total, percentComplete) {
alert(position + "|" + total + "|" + percentComplete);
},
complete : function(xhr) {
// status.html(xhr.responseText);
}
});
});
$('#ubutton').click(function(e) {
$('#myFile').submit();
});
});
I believe sending files is not available in pure jquery. I did it few days ago using plugins;
http://rubaxa.github.io/jquery.fileapi/
or
https://github.com/blueimp/jQuery-File-Upload
The first one is really impressive; i was able to do it in no time and visual progress indicatior and ability to use webcam for images is astonishing.
more in the topic You can find here, i think: How can I upload files asynchronously?
hope it helps :-)
I get an error like this:
Uncaught TypeError: Cannot read property 'form' of undefined
Firebug says this line is the culprit:
if($("emailPost2").valid())
Here's all my jQuery code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://github.com/jzaefferer/jquery-validation/raw/master/jquery.validate.js"></script>
<script type="text/javascript" charset="utf-8">
$(function(){
$("emailPost2").validate({
rules: {
emailAddress: {
required: true,
email: true
}
}
});
$('#zonePlus').click(function() {
$('#zoneNotif').submit();
});
$('#searchPost').submit(function(event) {
if ($(this).find('#searchBox').val() == '') {
event.preventDefault();
}
});
$("#searchBox").autocomplete({
source: 'php/searchAC.php'
});
$("button, input:submit, input:button, a#jql, input:radio").button();
$('#emailJQButton').live('click',function() {
$("#emailModal").dialog('open');
});
$('#eb1').live('click',function() {
$('#emailPost').submit();
$("#emailModal").dialog('close');
});
$('#eb2').live('click',function() {
if($("emailPost2").valid())
{
$('#emailPost2').submit();
$("#emailModal").dialog('close');
}
});
});
</script>
valid() should return true if it is valid, but I just get the error I mentioned above instead of any results.
Edit: Here's the HTML code for the form:
<div id="emailModal">
<form action="php/emailPost.php" method="POST" class="inline" id="emailPost2">
<label name="error"></label>
<input type="text" value="Enter an Email" class="required email" name="emailAddress" style="display: inline-block;">
<input type="button" value="Email" id="eb2"/>
<input type="hidden" name="passedCoupID" value="1"/>
</form>
</div>
Looks like the problem is simply that you forgot the # in the id selector:
$("#emailPost2").valid()
(rather than the current $("emailPost2").valid())
Assuming
form id="emailPost2"
you need
if($("#emailPost2").valid())
I wanted to BOLD the # but was not allowed inside the brackets, hence I was 15 seconds slower :(