I am using knockout.js plugin. I have created a custom validation rule named select for selectlist. I have created a jsfiddle :
http://jsfiddle.net/fQBxM/1/
My problem is when i load the page, the validation message is already shown, but i want to show it only when user submit the form. How can i do this ?
Add a default value '0' to your observable, then the validation won't fire for the initial value:
ko.observable('0').extend({ select: { message : "please select gender" } })
Demo JSfiddle.
Related
I have a form which dynamically adds or removes input fields depending on certain selections which have been made by the user.
The basic form looks like this, simplified:
<form action="...some/path..." id="MyForm" method="post">
<!-- the first input field is a select list, depending on the selected option, an ajax call will be made to update the div below with new input fields -->
<select name="selectList">
<option>#1</option>
<option>#2</option>
<option>#3</option>
<option>...</option>
</select>
<div id="UpdateThisSection"></div>
<input type="submit" value="Submit">
</form>
Depending on which option the user picks from the select list, the user will be presented with different input fields, which are rendered in the #UpdateThisSection div.
The input fields for option #1 would be:
Date Field (required), so the required attribute is set to the input field, as well as the custom data-type="Date" attribute
Text (optional), no required attribute is set
The input fields for option #2 would be:
Text (optional), no required attribute set
Text (optional), no required attribute set
The input fields for option #3 would be:
Text (optional), no required attribute set
Numeric (optional), required attribute set, as well as the custom data-type="Numeric" attribute
The jquery validation is implemented like this:
$("#MyForm").validate();
$.validator.addMethod("usDate",
function (value, element) {
return value.match(/^(0?[1-9]|1[0-2])[/., -](0?[1-9]|[12][0-9]|3[0-1])[/., -](19|20)?\d{2}$/);
},
"Please enter a valid date."
);
$("input[data-type='Date']").each(function () {
if ($(this).prop("required")) {
$(this).rules("add",
{
usDate: true
});
}
});
$("input[data-type='Numeric']").each(function () {
$(this).rules("add",
{
number: true
});
});
Validation works perfectly fine if I open the form and select any option. The form is being validated the way it should. However, if I change my mind and select a different option from the dropdown, the form is not validating correctly anymore. On submit, I see that the form is being validated with the previous form's requirements.
Looking at the $("#MyForm").validate() object on the console the invalid as well as the submitted property are still holding information of the previous form. What is the easiest way to reset the validator whenever a new ajax call load a new form element?
I tried to reset the form using $("#MyForm").validate().resetForm(); but it didn't clear the properties mentioned above.
Trying to clear the validation as suggested in this stackoverflow-post didn't resolve the issue for me either.
What is the easiest way to reset the validator whenever a new ajax call load a new form element?
In the Ajax success callback, remove all static rules from an element
$("#MyForm").rules( "remove" );
// Then add or re-add some static rules...
Sorry... can't easilly recreate that for a demo.
I'm trying to take a field value (that's a two option check box) and if it is checked then set the visibility on a section to be true, and if it's not checked then to set the visibility to false. I have it set on the field to call the function on an on change event.
When I go into the form and either check the box or uncheck the box it gives me a script error.
This is the function I'm using:
function SetProductVisible(){
if (Xrm.Page.getAttribute("ee_productspecific").getValue()){
Xrm.Page.ui.tabs.get(“SubGrids”).sections.get(“Products”).setVisible(true);
}
else{
Xrm.Page.ui.tabs.get(“SubGrids”).sections.get(“Products”).setVisible(false);
}
};
Thank you for your help.
The fields default value is also set to "No"
Ensure that you are using the right quotation marks by replacing “ and ” with ".
As mentioned in the comments, also ensure that you are using the right name for your tab and section, and check the developer console for more information about the error.
here is your solution...
I created a new field on the CRM form called "log_showhide" which is a two option field. You need to edit the code below to match your Section name and field name with the correct values...
Furthermore, I would set the code to run on load of the form as well as on change of your field.
This method is applicable to Microsoft Dynamics 365 v9.x
function hideOrShow(executionContext){
var a = executionContext.getFormContext().getAttribute("log_showhide").getValue();
if (a == 0) {
Xrm.Page.ui.tabs.get("SUMMARY_TAB").sections.get("sampleSection").setVisible(true);
} else {
Xrm.Page.ui.tabs.get("SUMMARY_TAB").sections.get("sampleSection").setVisible(false);
}
}
Rather than doing a custom web resource to show/hide a field or section, I would recommend you go with a Business Rule. With a Business Rule you can set up a simple check of the value of one field and hide other fields based on that.
Another way to hide a section by field's parent. Just refer a field on that section:
function SetProductVisible()
{
var some_section = Xrm.Page.getControl("new_field_on_that_section_name").getParent();
some_section.setVisible(Xrm.Page.getAttribute("ee_productspecific").getValue());
};
I have a form that is being validated with the jQuery validation plugin successfully.
Messages are displayed in the correct position and in the correct situations.
So far, so good.
I have 1 field that is being validated correctly, but I need to position that 1 validation message differently to the others. With 2 inputs next to each other, I want the validation to appear under them both (ie under the block that wraps them both) rather than to the right per individual inputs.
The validation on these 2 inputs are dependent on each other, ie at least one must have input. The validation rule works, it's just the positioning I'm struggling with.
I'm using the following validation syntax:
$('#formId').validate({
rules: {
},
messages : {
}
}
In my HTML I have created a label specifically for the (radio) field I am trying to customise:
<label for="radioName" id="radioNameId-invalid" class="error"">Some error message</label>
I tried adding content to the 'showErrors' function of validate, which works, but seemingly then doesn't show any of the other validation messages in my page.
showErrors: function(errors) {
var collectionMethodError = errors['collectionMethod'];
if(collectionMethodError) {
$('#radioNameId-invalid').text(errorString);
$('#radioNameId-invalid').css("display","block");
}
}
I want to enable this error AND then allow validator to continue to do its default behaviour for other fields.
If I remove the showErrors function, the other validation messages are displayed but not my custom one.
How can I get both behaviours?
I ended up using the errorPlacement function instead of the showErrors function:
errorPlacement: function(error, element){
$(error).insertAfter(element);
// special case for display
if($(element).attr("name")=="radioName") {
$(error).insertAfter("#anElement"));
$("label[for=radioName].error").attr("id","invalid-radio-message");
}
}
So in short I'm adding an ID to a label that validation plugin adds, then styling to that ID in my css.
That seems to do what I was trying to do. Now to workout the re-hiding of the message!
I have a payment form,in which when I click on the internet banking ,all the input field be disabled and instead show some images. this is the fiddle upto which i have done http://jsfiddle.net/f8Fd3/4/ No where I cant hide the input text field using their class id.
this is the js
function cc()
{
$('#cards.credit-card').removeClass("visa mastercard").addClass("visa");
}
function dc()
{
$('#cards.credit-card').removeClass("visa mastercard").addClass("mastercard");
}
function ib()
{
}
please check the fiddle to get a clear picture
It is because, by default, when 'button' tag inside a 'form' is clicked, 'form' will be submitted.
It's not redirecting for the other two because there's a HTML5 form validation that prevents the form from being submitted. (that's why you will see an error message when you click Visa/Mastercard)
if you insist on binding events in the dom...you can pass an event object to the handler:
<button onclick="javascript:ib(event)" class="btn btn-1 btn-1c">Internet Banking</button>
and in your function:
function ib(event) {
event.preventDefault();
}
you may wanna do the same to the other two handlers as well.
so the default submit action will be prevented.
and to disable all the text fields:
$('#cards input[type=text]').prop('disabled', true);
to hide them:
$('#cards input[type=text]').hide();
EDIT
by the way. you don't have to use selectors like $('#cards.credit-card'), 'id' should be unique in the DOM, just by using $('#cards') you will get the same element.
The syntax class="class=tokenex_data full gr-input" is incorrect.
Instead use, class="tokenex_data full gr-input"
Then use :
`function ib()
{
$(".tokenex_data").hide();
$(".monthgr-input").hide();
}
`
You want to select all input & select elements and set their property disabled to true:
$('#cards input, #cards select').prop('disabled', true);
Fiddle
Iam using javascript validation methods and rules for my form.And it is working fine.But I have an option that user can add many phonenumbers using clicking on a button Add More.But how to validate those fields through javascript.Bec we did'nt know how many fields user can add...I have tried with
jQuery.validator.addClassRules({
'phneClass' : {
required:true,
numeric : true
},
'name' : {
required : true
}
});
I need to give 2 diff messages for the both required fields.How can I achieve that.Thanks in advance.
You are using this validator: http://jqueryvalidation.org/?
Has your input fields the class 'phneClass'?
Maybe your have to call the addClassRules method after you added a new phonenumber field
Cheers
In that you can add html5 required attr to the generated input field inside the form that makes validation
check this link also
http://www.the-art-of-web.com/html/html5-form-validation/
http://www.wufoo.com/html5/attributes/09-required.html