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.
Related
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).
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
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
I am combing the jQuery validation plug-in with the jQuery Form Plugin to submit the form via AJAX.
This works perfectly in Firefox & Chrome, but (as usual) Internet Explorer is being a pain. For reasons that are alluding me, IE is ignoring the ajaxSubmit, as a result it submits the form in the normal fashion.
I've followed the validation plug-in's documentation when constructing my code:
JS:
<script src="/js/jquery.validate.min.js" type="text/javascript"></script>
<script src="/js/jquery.form.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var validator = $("#form_notify").validate({
messages: {
email: {
required: 'Please insert your email address. Without your email address we will not be able to contact you!',
email:'Please enter a <b>valid</b> email address. Without a valid email address we will not be able to contact you!'
}
},
errorLabelContainer: "#error",
success: "valid",
submitHandler: function(form) {$(form).ajaxSubmit();}
});
$('#email').blur(function() {
if (validator.numberOfInvalids() > 0) {
$("#label").addClass("label_error");
return false;
}
else {$("#label").removeClass("label_error");}
});
$('#form_notify').submit(function() {
if (validator.numberOfInvalids() == 0) {
$(this).fadeOut('fast', function() {$('#thank-you').fadeIn();});
return true;
}
return false;
});
});
</script>
Form HTML:
<form id="form_notify" class="cmxform" name="form_notify" action="optin.pl" method="get">
<fieldset>
<div class="input">
<label id="label" for="email">Email Address:</label>
<input type="text" id="email" name="email" value="" title="email address" class="{required:true, email:true}"/>
<div class="clearfix"></div>
</div>
<input type="hidden" name="key" value="sub-745-9.224;1.0.0.0.0.0.0.0.0.0.0.0.0.0.0.0;;subscribe-224.htm">
<input type="hidden" name="followup" value="19">
<input type="submit" name="submit" id="submit-button" value="Notify Me">
<div id="error"></div>
</fieldset>
</form>
I can't understand what is causing IE to act differently, any assistance would be greatly appreciated.
I can provide more information if needed.
Thanks in advance!
Try the following:
$('#form_notify').submit(function(e) {
e.preventDefault();
if (validator.numberOfInvalids() == 0) {
$(this).fadeOut('fast', function() {$('#thank-you').fadeIn();});
return true;
}
return false;
});