Script : Jquery
I am new to jquery, and I found this piece of code which I tried but didn't succeed. It uses jquery validator plugin. Here is the code :
<html>
<body>
<form id="employment-application" method="post">
<input name="full_name" type="text" />
<div id="full_name_validate"></div>
<input type="submit" />
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.1.47/jquery.form-validator.min.js"></script>
<script>
$(function validate() {
var rules = {
rules: {
full_name: {
minlength: 2,
maxlength: 50,
required: true
},
},
errorPlacement: function (error, element) {
var name = $(element).attr("name");
error.appendTo($("#" + name + "_validate"));
},
};
$('#employment-application').validate(rules);
});
</script>
</body>
</html>
How do I achieve this ? here is the link http://jsfiddle.net/cMhQ7/
looks like the validator plugin version you are using is causing the issue. Try the following one http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js
or any from the page jqueryvalidation.org hotlink
I hope this fixes the issue.
try this
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<form id="employment-application" method="post">
<input name="full_name" type="text" />
<div id="full_name_validate"></div>
<input type="submit" />
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script>
$(function validate() {
var rules = {
rules: {
full_name: {
minlength: 2,
maxlength: 50,
required: true
},
},
errorPlacement: function (error, element) {
var name = $(element).attr("name");
error.appendTo($("#" + name + "_validate"));
},
};
$('#employment-application').validate(rules);
});
</script>
</body>
</html>
Related
I have 2 fields: Name Query and Date of Birth, while Name Query is mandatory and DoB isn't. I have the following form to show an validation message under the Name Query field:
var myForm = $("#myform").validate({
rules: {
NameQuery: "required",
DoBQuery: {
required: false
}
},
messages: {
NameQuery: "Please fill in name query field",
DoBQuery: ""
}
});
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script>
<form id="myform" method="post" action="">
<div>
<label for="NameQuery">Name</label>
<input type="text" id="NameQuery" name="NameQuery">
</div>
<div>
<label for="DoBQuery">Date of Birth</label>
<input type="text" id="DoBQuery" name="DoBQuery">
</div>
<input type="submit" value="Search">
</form>
Now I'd like to add some styling to the Name Query field validation message. Some code was added to the snippet, notice that the <div class="error__input"></div> has to EXIST IN BOTH FIELDS like in the snippet
var myForm = $("#myform").validate({
rules: {
NameQuery: "required",
DoBQuery: {
required: false
}
},
messages: {
NameQuery: "Please fill in name query field",
DoBQuery: ""
},
errorElement : 'div',
errorLabelContainer: '.error__input'
});
.error__input{
min-height: 20px;
}
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script>
<form id="myform" method="post" action="">
<div>
<label for="NameQuery">Name</label>
<input type="text" id="NameQuery" name="NameQuery">
<div class="error__input"></div>
</div>
<div>
<label for="DoBQuery">Date of Birth</label>
<input type="text" id="DoBQuery" name="DoBQuery">
<div class="error__input"></div>
</div>
<input type="submit" value="Search">
</form>
Now the validation message exists in both fields, I understand that jQuery-validate finds the error__input div and apply the class to it, but why does it add the message to the second field and how can I set the alert message to apply only on the first message while both <div class="error__input"></div> have to be there?
You want something like this, I guess:
var myForm = $("#myform").validate({
rules: {
NameQuery: "required",
DoBQuery: {
required: false
}
},
messages: {
NameQuery: "Please fill in name query field",
DoBQuery: ""
}
});
#myform .error {
display: block;
color: red;
}
#myform input {
display: inline;
}
#myform > div {
height: 50px;
}
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script>
<form id="myform" method="post" action="">
<div>
<label for="NameQuery">Name</label>
<input type="text" id="NameQuery" name="NameQuery" style="display: inline-block;">
</div>
<div>
<label for="DoBQuery">Date of Birth</label>
<input type="text" id="DoBQuery" name="DoBQuery" style="display: inline-block;">
</div>
<input type="submit" value="Search">
</form>
You could use errorPlacement to put your error message next to the error element.
errorPlacement: function(error,element){
error.appendTo(element.next(".error__input"));
}
var myForm = $("#myform").validate({
rules: {
NameQuery: "required",
DoBQuery: {
required: false /* if it is not required, why you put here? You can simply not insert this input field in validate()'s rules. */
}
},
messages: {
NameQuery: "Please fill in name query field"
},
errorElement : 'div',
errorPlacement: function(error,element){
error.appendTo(element.next(".error__input"));
}
});
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script>
<form id="myform" method="post" action="">
<div>
<label for="NameQuery">Name</label>
<input type="text" id="NameQuery" name="NameQuery">
<div class="error__input"></div>
</div>
<div>
<label for="DoBQuery">Date of Birth</label>
<input type="text" id="DoBQuery" name="DoBQuery">
<div class="error__input"></div>
</div>
<input type="submit" value="Search">
</form>
you should remove <div class="error__input"></div> tag after Date of Birth field
<input type="text" name="brand[]" class="form-control auto-brand" />
<script type="text/javascript">
$(function () {
$('input.auto-brand').each(function () {
$(this).typeahead({
name: 'brand[]',
remote: '...'
});
});
});
</script>
I would like that as I add the new inputs the typeahead is also initialized
I am using jQuery validation plugin to validate username is already existing or not.
Validation is working, I want to insert an icon after the input element if validation is successful. code is like this:
$(function () {
$("#register").validate({
//...
success: function(element) {
if (element.is('input[name="name"]')) {
//'<i class="fa fa-check fa-lg"></i>' is an icon
$('input[name="name"]').after('<i class="fa fa-check fa-lg"></i>');
}
},
//...
});
});
The first argument to success is the label element, not the input
jQuery(function($) {
var validator = $('#myform').validate({
rules: {
name: {
required: true,
minlength: 3
},
somefield: {
required: true,
minlength: 5
}
},
messages: {},
success: function(label, elem) {
var element = $(elem);
if (element.is('input[name="name"]') && !element.next().is('i.fa-check')) {
element.after('<i class="fa fa-check fa-lg"></i>');
}
}
});
});
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.js"></script>
<form id="myform" method="post" action="">
<input name="name" />
<input name="somefield" />
<input type="submit" value="Save" />
</form>
I am having trouble executing the following code successfully. I want to get autocomplete data from the server on 1st field (drug1) which is successful. I want that the 2nd field (drugdose1) should return result based on the value of the 1st field (drug1). But I am unable to pass the value of the drug1 to the php file. The firefox debug displays as localhost/lib/searchdose.php?d=&q=xx.
Here is the code:
<script type="text/javascript" src="lib/jquery.min.js"></script>
<script type='text/javascript' src='lib/autocompletefull.js'></script>
<link rel="stylesheet" type="text/css" href="lib/autocomplete.css" />
<script type="text/javascript">
$(function() {
$("#drug1").autocomplete('lib/search.php', {
delay:100,
maxItemsToShow: 15,
minChars:2,
useCache:false
});
$("#drugdose1").autocomplete('lib/searchdose.php', {
delay:100,
minChars:2,
extraParams: { d: $("#drug1").val() }
});
});
</script>
</head><body>
<p>
<form name="hello">
<input type="hidden" id="testing" value="hi there">
Drug Name: <input type="text" tabindex="1" size="40" name="drug1" id="drug1">
</p>
<p>Drug Dose: <input tabindex="2" type="text" name="drugdose1" id="drugdose1" size="35">
</p>
</form>
I am using autocomplete.js from https://github.com/dyve/jquery-autocomplete ... I am not using jquery.ui autcomplete ..
Try this,
src = 'lib/searchdose.php';
$("#drugdose1").autocomplete({
source: function(request, response) {
$.ajax({
url: src,
dataType: "json",
data: {
d: $("#drug1").val()
},
success: function(data) {
response(data);
}
});
},
min_length: 3,
delay: 300
});
I have sort this problem on my own. Here is the solution:
<script type="text/javascript">
var dname;
function newv ()
{
dname = $("#drug1").val();
$("#drugdose1").autocomplete('lib/searchdose.php', {
delay:100,
maxItemsToShow: 15,
extraParams: { d:dname },
minChars:1,
useCache:false
});
alert("Hello");
}
$(function() {
$("#drug1").autocomplete('lib/search.php', {
delay:100,
maxItemsToShow: 15,
minChars:2
});
});
</script>
</head><body>
<p>
<form name="hello">
<input type="hidden" id="testing" value="hi there">
Drug Name: <input type="text" tabindex="1" size="40" name="drug1" id="drug1" onchange="javascript:newv();">
</p>
<p>Drug Dose: <input tabindex="2" type="text" name="drugdose1" id="drugdose1" size="35">
</p>
</form>
I'm working with validation and I am using knockout.js (and durandal.js) for a view modal.
I want to make a textbox's border red when it's blank if I click on submit button.
When a user starts to type in the textbox, the border color red should be removed.
Code is here: http://jsfiddle.net/LvHUD/1/
What I did is:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/knockout.debug.js"></script>
<script src="Scripts/knockout.js"></script>
<script src="Scripts/knockout.validation.debug.js"></script>
<script src="Scripts/knockout.validation.js"></script>
</head>
<body>
<input type="text" data-bind='value: username' />
<br />
<button data-bind="click: submit">Submit</button>
<div data-bind="visible: showErrors, text: errors" />
<script>
function ViewModel() {
var self = this;
self.username = ko.observable().extend({
required: true
});
self.showErrors = ko.observable(false);
self.submit = function () {
self.showErrors(true);
if (self.isValid()) {
// save data here
}
}
self.errors = ko.validation.group(self);
}
ko.validation.init({
registerExtenders: true,
messagesOnModified: true,
insertMessages: false
});
ko.applyBindings(new ViewModel());
</script>
</body>
</html>
Knockout Validation adds to your observable two observables: isValid & isModified.
You can use the isValid observable to get what you are looking for.
I have modified slightly the jsfiddle provided by Bradley Trager:
http://jsfiddle.net/tBcRD/3/
Basically the data-bind attribute was changed as follows:
<input type="text" data-bind="value: username, valueUpdate: 'afterkeydown', css:{'error':(!username.isValid() && showErrors())}" />
You can use knockouts css binding to add an error class to your input box:
<input type="text" data-bind="value: username, css:{'error':showErrors}" />
Here is the jsFiddle: http://jsfiddle.net/bradleytrager/tBcRD/
Addition:
If you would like it to remove the highlight when the user types, one way of doing it is by updating your observable on the key down event, and subscribing to your observable in order to remove the error messages when the observable changes:
HTML:
<input type="text" data-bind="value: username, css:{'error':showErrors}, valueUpdate: 'afterkeydown'" />
JS:
self.username.subscribe(function () {
self.removeErrors();
});
self.removeErrors = function () {
self.showErrors(false);
};
I updated the jsFiddle with this functionality.
You can use the validationElement binding for this (wiki):
http://jsfiddle.net/tBcRD/10/
HTML:
<input type="text" data-bind="value: username, validationElement: username, valueUpdate: 'afterkeydown'" />
<br/>
<button data-bind="click: submit">Submit</button>
JS:
function ViewModel() {
var self = this;
self.username = ko.observable().extend({
required: true
});
this.validationModel = ko.validatedObservable({
username: self.username
});
self.submit = function () {
self.username.valueHasMutated();
if (this.validationModel.isValid()) {
alert("data saved");
}
}
}
ko.validation.init({
registerExtenders: true,
messagesOnModified: true,
insertMessages: false,
decorateElement: true
});
ko.applyBindings(new ViewModel());
CSS:
.validationElement {
border: 1px solid red;
}