I am using jquery validation engine in my project on the input fields.
The code structure is like this
<form>
<input/>
<input/>
</form>
and i validate the fields in keyUp.
Now how do i show the prompt only on the input that has a focus.
or in otherwise how do i validate a single input element that has focus inside a particular form as the validation engine is attached to the form..
I use JavaScript-MVC framework
Please do help me. Thanks in advance
To validate a single input element that has focus inside a particular form on keyup try this
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.10.0/jquery.validate.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('form').validate({ onkeyup: false });
$('form').bind('keyup', function () {
$(':focus', this).valid();
});
});
</script>
</head>
<body>
<form>
<input name="one" class="required number"/><br />
<input name="two" class="required" /><br />
<input type="submit" />
</form>
</body>
</html>
Related
<!DOCTYPE html>
<head>
<meta charset=" UTF-8">
<title> Document</title>
</head>
<body id="chat">
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.5.0/socket.io.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js"></script>
<form v-on="submit: send">
<input v-model="message">
<button>Send</button>
</form>
<script>
var socket = io();
new Vue({
el: '#chat',
date: {
message: ''
},
methods: {
send: function(e)
{
e.preventDefault();
alert("a");
}
}
})
</script>
</body>
I want to call the send method defined in new Vue when the form is submitted ,
But when i submit the form, page is reloading.
I have created a Vue object and linked it to the chat element.
I guess e.preventDefault() is not working.
Interesting, I just helped somebody with a similar issue, the syntax for Vue.2.0 is v-on:submit="send" not v-on="submit: send". Vue already has a way stop the form submitting which is: v-on:submit.prevent so you don't need the e.preventDefault, you would get:
<form v-on:submit="send" v-on:submit.prevent>
or a shorter version:
<form v-on:submit.prevent="send">
There are a few more issues here, so I will go through them for you:
Firstly, you are never submitting the form. To submit a form you need a submit input, not a button:
<input type="submit" value="Send" />
However, from what I can see it's likely you don't even need a form, and can simply use a button with v-on:click:
<div>
<input v-model="message">
<button v-on:click="send">Send</button>
</div>
And then get what was submitted from the view model:
send: function()
{
alert(this.message);
}
You should also use the console (under developer tools in your browser) and log any output rather than alert (console.log(this.message)), because it will also sniff out any general errors with your code - for example I can see that you also have a typo (the same one I always make) it's data not date:
data: {
message: ''
},
Okay, what about this
<form #submit.prevent="send">
<input v-model="message">
<button>Send</button>
</form>
And then you can remove preventing default browser action from your send() method
I can't get this form to submit via Ajax to a PHP script and cannot figure out why. Please help. I am planning to use this in phone gap after development and was under the impression this ajax format would work better than xmlhttprequest method - is this really the case?
<html>
<head>
<title></title>
</head>
<body>
<h1>Welcome</h1>
<hr>
<form id="idForm" name="idForm">
<input type="text" size="8" id="date" name="date"><br>
<input type="hidden" size="8" id="reversedate" name="reversedate"><br>
<input type="hidden" size="1" id="dow" name="dow"><br>
<input type="submit" id="submitbutton" name="submitbutton">
</form>
<br><br><br>
<br>
<br>
<p id="p1">x</p>
<br>
log out
<script>
$('#submitbutton').click(function(){
$("#idForm").submit(function() {
var url = "fetchsimple.php"; // the script where you handle the form input.
$.ajax({
type: "POST",
url: url,
data: $("#idForm").serialize(), // serializes the form's elements.
success: function(data)
{
alert(data); // show response from the php script.
}
});
return false; // avoid to execute the actual submit of the form.
});
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/ui.js"></script>
</body>
</html>
I tried a simple datepicker in my codeigniter page but somehow it's not showing datepicker.
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" />
<script type="text/javascript">
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
my html code is,
<input type="text" placeholder="Pickup Date" id="datepicker" name="datepicker" class="formfield_text hasDatepicker">
Try this as your html code,
<input type="text" placeholder="Pickup Date" id="datepicker" name="datepicker" class="formfield_text">
This works. The problem is that you can not use class hasDatepicker. Remove it and try.
I want to fire a button's click event when pressing ENTER inside a input and I find it quite difficult with AngularJS.
My view (simplified, updated):
<!doctype html>
<html lang="en" ng:app="test">
<head>
<meta charset="utf-8" />
<title>Test</title>
<link rel="stylesheet" href="css/app.css" />
</head>
<body ng-controller="TestController">
<button ng-click="onButton1Click()" class="btn1">Click Me</button>
<button ng-click="onButton2Click()" class="btn2">Don't click me</button>
<script src="lib/jquery/jquery.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="js/testcontroller.js"></script>
</body>
</html>
My controller for this view:
'use strict';
angular.module('test', [])
.controller('TestController', ['$scope',
function($scope) {
$scope.onButton1Click = function() {
alert("Hello");
}
$scope.onButton2Click = function() {
$('.btn2').click();
}
}])
I simplified all the code to this. When I click on btn2 I get this error
$apply already in progress
No, I can't call $scope.onButton1Click() directly, I must simulate the btn1 click.
You mentioned
fire a button's click event when pressing ENTER inside a input
So if it is safe to assume that you can have a form I would prefer using ng-submit as shown below.
<form ng-submit="clickEventFunction()">
<input type="text"/>
<button type="submit">Click</button>
</form>
Note button type should be submit.
This took me a while to figure out (lots of fiddles).
<form id="nowsorting" ng-submit="getData(sc_user)">Now sorting the Soundcloud likes of <input type="text" ng-model="sc_user"><input type="submit" value="Sort"></form>
Make a form and use ng-submit to fire the event (likely a function).
Then create two inputs (one is "text" and the other "submit").
Then pushing enter should fire the ng-submit event/function.
I think, you just have to call your $scope.onButtonClick()
Please check this Plunker
$scope.onKeyPress = function($event) {
if ($event.keyCode == 13) {
$scope.onButtonClick();
}
};
I am using
<script src="http://malsup.github.com/jquery.form.js"></script>
for my ajax form upload.
When I upload file without the Codeigniter framework this works fine. But when I used it within the frame work it shows me the following error :-
HTTP wrapper does not support writeable connections
plus it is actually loading a separate page
Here's my code :-
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var options = {
clearForm: true,
resetForm: true
};
// bind 'myForm' and provide a simple callback function
$('#myForm').ajaxForm(function() {
//alert("Thank you for your comment!");
});
$('#myForm').ajaxForm(options);
});
</script>
</head>
<body>
<form id="myForm" name="myForm" action="comment.php" method="post" enctype="multipart/form-data">
<input type="text" name="name" />
<br />
<textarea name="comment"></textarea>
<br />
<input type="file" value="Share a Pic" name="file" id="file" />
<br />
<input type="submit" value="Submit Comment" />
</form>
</body>
For Codeigniter I changed the action to
site/submit_myform
So it loads site/submit_myform. Site being my controller. other values are being stored in the database
Thanks
The ajax part isn't working if the page is redirecting. You need to return false; during the on submit to prevent the page from redirecting.
I would suggest following the ajaxSubmit()example provided in the form plugin.