When I display a value from my ViewModel into an input field (see code below) and post the form, model binding is supported correctly. This means I can find the (modified) value into my ViewModel.
<input type="text" asp-for="FirstName" value="#Model.FirstName" />
But when I display the same value from the ViewModel into a label, then I don't find it into the ViewModel after I post the form:
<label asp-for="FirstName">#Model.FirstName</label>
Do labels support model binding? If yes, am I doing anything wrong in my code?
If not, what's the alternative when I need to keep the value into my ViewModel? Storing them into HiddenFields?
Label contents are not submitted to the server. It is a basic feature of HTML.
Only form fields' contents are submitted when the form is submitted.
Related
since our AEM guy is out of office at the moment, i need to fix something in our CRX. I have a form with a checkbox in my website, where authors can set a text next to it. Now i am trying to add the functionality to set this checkbox to be required from the authoring dialog.
I was able to find a textfield which has this property in authoring, but in the html in CRX i only see the code required=${required}, where other fields like label are shown like ${properties.label} and have a corresponding node in CRX. I don't understand how the required is implemented and need help here.
I already tried to add required=${required} to my checkbox input markup, but this did not work, since in the authoring dialog there still was no checkbox/switch to make the field required (which was kinda expected).
this is the line in the markup which should be required if the author sets it to required in the authoring dialog:
<input required="${required}" type="checkbox" name="campaignform-termsofservice"/>
this is the whole html of the checkbox i want to be able to make required:
<div data-sly-test="${!empty}" class="form__text">
<label class="maut-checkbox--container">
<input required="${required}" type="checkbox" name="campaignform-termsofservice"/>
<span class="maut-checkbox--checkmark"></span>
<span>${properties.checkboxtext #context='html'}</span>
<div>${properties.tncText}</div>
<div style="color:white;" class="authoring-error" data-sly-test="${wcmmode.edit && !tncDate.tncLinkActivationDate}">${'b2x.maut.campaignform.dialog.tos.activationmessage' # i18n, source='user'}</div>
<input type="hidden" name="maut.field.tnc" value="${tncDate.tncLinkActivationDate}" />
</label>
</div>
Now i only need to figure out how i can show the option to set it to required in the authoring dialog.
Thanks in advance
If you want to know how the required=${required} is implemented then first of all in html of the component look for something like data-sly-use.required. This will have a expression like =com.project.yourProject.className or some js file.
Lets discuss about the java case which is the most common way. What data-sly-use does is that it creates an object of the class that you gave in the expression. In your case your object is required. Then you need to check the java class that the expression evaluates to. Commonly all the backend logic code will be their and if some manipulations or validations are required to be done with the data that the author enters in the dialog will be their. This class will also contain annotations that maps the class variables with the property value of the dialog.
Hope this explains from where this ${required} came from. It will be more clear to you if you look into the java class that is referred to by the data-sly-use expression.
I'm creating a custom element that wraps a third-party control. For some reason, I have to apply this 3rd-party control on a <div> instead on an <input> or else it will behave differently.
I'm using x-tag to create the custom element.
You could insert a <input> tag with attribute type="hidden" and then duplicate the content of the <div> you want to post, it should work.
As an example, you can read this other post on SO.
I have Got an input element <input type="text" name="password"> and it is not inside any form . How can I implement any Custom validation like required, minimum password Length onto this ?
Input elements can still use the built-in validator directives without being inside a form element.
They just need to be a form control e.g. marked with the ngModel attribute. The example input field below is marked with ngModel and the required validator so it's validation status will be tracked and synced with the model.
<input name="fullName" ngModel required>
See the document for the NgModel directive for more details.
IBM web experience factory uses dojo library, I am wondering if the I set <input type="text" name="usrname" required> in the consumer model, does the button still work if the input is not filled?
Well, HTMLFormElement has a method called checkValidity() which you can use.
So, in your case, you could use the :input selector with dojo/query to query all input elements inside a form (includes buttons, checkboxes, textfields, text areas and select boxes) and then use the onChange event to check if the form is valid and change the buttons disabled attribute.
For example:
query("[name=myForm] :input").on("change", function(evt) {
var isInvalid = !evt.target.form.checkValidity();
query("button[type=submit]").attr("disabled", isInvalid);
});
Now all you need to do is to make sure that your button is initially disabled/enabled depending on the initial state of the form.
A full example can be found on JSFiddle: http://jsfiddle.net/j8L6j77g/
<input id="inputID" class="textfield" name="myData" maxLength="5" type="text" autocomplete="off">
I was looking for a way to fill the input box programmatically but there is no value attribute...
I tried element.SetAttribute("value", "blahblah");
Any ideas?
It involves C# Windows Forms Webbrowser.
edit: My thanks go to the only one who responded to my post. I've found a better answer for me which is to set the InnerText and then programmatically click the element so it would behave like if I typed something. I am still wandering though whether I could use SetAttribute or not.
If you include the 'runat="server"' attribute in your input tag, then you should be able to access it from the code-behind. For example:
<input id="inputID" class="textfield" name="myData" maxLength="5" type="text" autocomplete="off" runat="server"/>
can be accessed as such:
inputID.Value = "New Text";
Another StackOverflow article explains this: Accessing HTML Elements in ASP.Net.