I'm trying to use jquery validation plugin with Bootstrap 3 to validate my input fields. However, it seems that it does not work in IE8. Is there a fix for this? My live demo.
My code:
<label for="firstName">First Name</label>
<input type="text" name="firstName" id="firstName" class="form-control input-lg" tabindex="1">
Jquery:
<script>
$('form').validate({
rules: {
firstName: {
required : true
},
lastName: {
required : true
},
}
});
Fixed: I had to revert to an older version of Jquery (v 1.8.3).
Related
I'm developing a form and need to enable or disable a field depending on the answer given.
Attached screen. When choosing whether to enable the field below, NO disables it.
Thanks for the reply.
You can try this (using jquery hide and show):
You have to include jquery first in you file to make it work;
HTML:
<script src="jquery-2.1.4.js" type="text/javascript"></script>
<input type="radio" class="radiobutton" name="select" value="yes" /> yes
<input type="radio" class="radiobutton" name="select" value="no" />no
<input type="text" name="name" id="name" value="" />
Working example https://jsfiddle.net/prohit0/zfjsmn59/22/
SCRIPT:
<script>
$(document).ready(function(e) {
$('input[type="radio"]').click(function(){
if($(this).attr("value")=="yes"){
//id is the id of the elemnt to hide
$('input[id="name"]').show();
}else {
$('input[id="name"]').hide();
}
});
});
</script>
http://www.tutorialrepublic.com/faq/show-hide-divs-based-on-radio-button-selection-in-jquery.php
Have problem with fancybox and jquery validate plugin when form is in fancybox container.
For examle (inline):
html:
<script>
$(document).ready(function(){ $.fancybox('
<form class="myform">
<input type="text" name="email" class="email" />
<input type="submit" value="submit" name="submit" />
</form>
');
})
</script>
js file:
$(".myform").validate(
{
rules: {
email: "required",
email: "email"
}
}
);
How to make jquery validation pluging to work in fancybox?
Do two things...
Use the afterLoad FancyBox callback function to initialize .validate() immediately after the form is loaded.
Put the content for FancyBox in a hidden div instead of in your jQuery. It's cleaner.
Note: You may want to reconsider using email for the name attribute. It has potential to cause great confusion since the rule is also called email.
HTML:
<a id="test" href="#inline">Test</a>
<div style="display:none" id="inline">
<form class="myform">
<input type="text" name="email" class="email" />
<input type="submit" value="submit" name="submit" />
</form>
</div>
jQuery:
$(document).ready(function () {
$('#test').fancybox({
afterLoad: function() {
$('.myform').validate({
// rules and options for validate plugin,
rules: {
email: { // "email" is name of the field
required: true,
email: true // "email" is name of the rule
}
}
});
}
});
});
Working DEMO: http://jsfiddle.net/ZMEEW/
When i use yui3`s io-form module to post a form, i found the field value that server reseived is null...
Any help is welcome.
<form name='testajax' id="testajax1" >
<input type="text" name="test1" id="test1" ></input>
<input type="text" name="test2" >
<input type="text" name="test3" id="result" >
<input type="submit" value="submit" id="submit">
</form>
Y.io('/ajax/test',{
method:'POST',
form: {
id:Y.one('#testajax1'),
useDisabled: true,
},
on:{
complete:function(id,response){
Y.log(Y.one('#test1').get('value'));
},
start:function(id,response){
Y.log(Y.one('#test1').value);
}
}
});
You are passing a Y.Node to form.id and the docs indicate that it takes either a string or a "formObject" which I'm assuming means a "form element". I don't believe a Y.Node is a valid (which is an unfortunate API choice if true). Try switching your code to:
form: {
id: "#testajax1"
}
http://yuilibrary.com/yui/docs/io/#serializing-html-form-as-data
Why would this user control have the apostrophes encoded? It is causing issues with Jquery Templates. The apostrophe is being encoded to ' from an AJAX request.
<script type="text/html" id="editTimeTemplate">
#Html.TextBoxFor(q => q.Time, new { type = "text", maxlength = 8, data_bind = "value: editTime.time.time, time: { options : { defaultTime: '8:00', showPeriod: true, showLeadingZero: false} }" })
</script>
<script type="text/html" id="editTimeTemplate">
<input data-bind="value: editTime.time.time, time: { options : { defaultTime: '8:00', showPeriod: true, showLeadingZero: false} }" id="Time" maxlength="8" name="Time" type="text" value="" />
</script>
Internally the TextBoxFor uses a TagBuilder, which will do this encoding for all attribute values. The simple workaround is to not use a helper method, but an HTML tag (I am using MVC4, so the IdFor and NameFor methods you would have to implement yourself).
<input type="text" id="#Html.IdFor(m => m.Time)" name="#Html.NameFor(m => m.Time)" maxlength="8" data-bind="value: editTime.time.time, time: { options : { defaultTime: '8:00', showPeriod: true, showLeadingZero: false} }" />
or of course just:
<input type="text" id="Time" name="Time" maxlength="8" data-bind="value: editTime.time.time, time: { options : { defaultTime: '8:00', showPeriod: true, showLeadingZero: false} }" />
If this bothers you a lot (or you do this a lot) I would go the route of implementing my own TexBoxFor extension method and override any behavior you do not like.
I'm trying to use the jQuery Validate plugin on a form like below:
JS:
<script src="jquery-1.7.1.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>
<script>
function ValidateFields() {
$("#createProgramForm").validate({
rules: {
firstname: { required: true, minlength: 2 },
lastname: { required: true }
},
messages: {
firstname: { minlength: "Minimum 2 characters." },
lastname: { required: "Please enter a last name." }
}
});
if ($("#createProgramForm").valid()) {
alert("Form is valid");
}
}
</script>
HTML:
<body>
<div id="page">
<form id="createProgramForm">
<p>
<label for="firstname">
First Name</label>
<input name="firstname" id="firstname" type="text" />
</p>
<p>
<label for="lastname">First Name</label>
<input name="lastname" id="lastname" type="text" />
</p>
<p>
<button onclick="ValidateFields();">Validate</button>
</p>
</form>
</div>
</body>
When I click Validate, the validation error messages are shown next to the fields. But the error messages don't go away once the field becomes valid like in the demo here. Does anyone know why this happens?
Um, works for me. Perhaps try the latest jquery.validate plugin? The version I used was here