I have validation on all areas of a form, and within the inputs I have hints which are set in the input's Value.
However, the problem I have is that CodeIgniter see's the input as being filled in so a Validation error doesn't occur.
I know I can create a callback_function for each input, but with around 10 forms and 100 inputs I was hoping to avoid this and possibly create a generic function or rule?
Any help is greatly appreciated
You seem to be setting default values for your inputs when what you really want is a placeholder
So instead of this:
<input value="Enter your email" />
You want this:
<input placeholder="Enter your email" />
Depending on how you are setting up your input data, a single callback function could suffice if you really needed it, but really: Don't start hacking up Codeigniter for this. Just use placeholder as it was intended (see javascript solutions for older browsers).
Read more about it here:
http://diveintohtml5.ep.io/forms.html#placeholder
I am assuming what you mean is this:
Ghosted Values http://img864.imageshack.us/img864/8124/ghosted.png
Where the value in there is never meant to be the actual value?
The easy solution is to have a class on the <input> that indicates that it's using a stock input (and also it can grey the text out). When the user clicks in the field javascript can clear the initial value out for you (and remove the marker class).
You can then on the submit button click event go through the form and clear the values of anything with the marker class before you actually submit the form.
Related
I have two input fields first name and last name.
Application was running really well.
Suddenly someone came in from Mars and input something like this in those input fields
*(~'##~>?<+!""*%$)!
for both first name and last name. Now don't ask me why he did this cause in Mars this is very common. You can try it on this fiddle
http://jsfiddle.net/farrukhsubhani/3RjRF/
This text then went into my database and now when i retrieve it it came back like this
*(~'##~>?<+!""*%$)
which is ok for me as its html and I can place it back into knockout and it gets populated as html as you can see in fiddle above. However this Mars guy then thought that on Earth this is not a nice name to be with so he tried to edit field.
The above fiddle is kind of that edit page which shows him old value at bottom and two fields at top. He does not know html so he thought we have changed his name in input fields however I need to know
When passing text to knockout to give initial value to an input field is it possible to tell it that consider this text as html so it renders properly in input field
The other way around is to send him to http://www.w3schools.com/tags/ref_entities.asp and tell him about reserved HTML characters. This info has been stored in database (using Entity Framework simple person.fname and person.lname both with attribute AllowHTML) so on my fiddle i have just placed it in two variables and you can see how actual text boxes are different than html below. If i dont bind using Knockout then actual text is shown in these boxes and user can edit <>' signs without any problem.
Anyone with a solution before he leaves our planet. This can change alien life on our planet.
Update
If i go into this field and paste (~'##~>?<+!""*%$)" binding works fine and you can copy this and paste it into fiddle to see that. However its not taking that value from Javascript variable to knockout expects it to be a string and html special characters are not shown properly in input field.
We have done another test without Knockout and this text does get rendered within the field when you try to edit it its fine.
We have updated JSfiddle to work without JQuery and its the same result if you store it in a js variable and give not value to input field
http://jsfiddle.net/farrukhsubhani/3RjRF/3/
If we assign value to input field and just use jQuery to populate fullname then it works
http://jsfiddle.net/farrukhsubhani/3RjRF/4/
This last fiddle is a working example and we want Knockout to do what JQuery is doing.
I think the question then comes to how can this text be stored in javascript variable and placed into input field as html text so special characters appear unescaped. You can try unescape on jsfiddle that did not work for us.
Somewhere along the trip into (or maybe out of) your database, the value is being HTML-escaped. It's not Knockout itself that's doing it. You're going to need to track that location down, but you can't just disable it; you're going to have to replace it with something that sanitizes the result or otherwise you're opening yourself up to cross-site scripting attacks (any <script>s from external sources inserted into the input would have complete access to your data).
Any time you see the html: binding used, warning bells should go off in your head and you should VERY carefully to check to ensure that there's NO possibility of raw, unexamined user input making it into the string that gets displayed.
Ok here is what i did at the end
http://jsfiddle.net/farrukhsubhani/3RjRF/7/
I have done following:
I have added value attribute to input field and placed the input text as it came from server into it. Because I am using TextBoxFor in MVC it did that for me.
Before I apply knockout binding I have picked this value up using $('#kfname') and passed it to the actual binding so it used the value that came from server. Previously it was passed like (#Model.fname,#Model.lname)
I think what this did was allowed jQuery to pick up the value and assign it to binding instead of variable
ko.applyBindings(new ViewModel($("#kfname").val(), $("#klname").val()));
Hopefully this would help someone using knockout.
I'm evaluating AngularJS and so far I'm very enthusiastic about it. But there's something missing on the validation front: the available options, such as the built-in mechanisms and the AngularUI initiative, implement validators through directives and, as such, every validation should be declared in the view:
<form ng-controller="SomeController">
<!-- Notice the 'required' attribute directive below: -->
<input type="text" ng-model="user.name" name="uName" required />
</form>
In this example, the view is defining that user.name is required. It's like saying the view defines the proper shape of the model. Isn't it a little backwards? Shouldn't the view reflect the states, including error states when it's the case?
Am I mistaken? I'm wondering if it's possible to apply any validators in the controller, signaling the model's data as valid/invalid, and updating the view accordingly (painting form controls with red, showing error messages, clearing previous errors and so on). I'm assuming AngularJS is powerful enough for this, but in the docs and samples so far I just haven't seen anything like I've described above. Thanks!
I guess its all about perspective. The way I see it is, you are defining a view which contains a form and that form contains an input of type text. It is this text input that you are marking as required. If you note, angular does not care if the text is user.name or user.age or whatever else. Its just associating that text input with required. So its just validating that text input and the model associated with that model is the final result ( the place where the value goes in if the validation passes! ).
Have a look at
http://docs.angularjs.org/guide/forms
for custom form validations, if you want to to be doing validations that are not the default ones.
Since you already know the view that is getting produced in advance ( lets call it at compile time! ) , you can associate all validators in the view and hence wouldnt have to do it in the controller (which perhaps is for run-time validation! ).
I am just starting with jquery.validation and like it. One reference I felt specifically helpful when trying to understand the big picture is http://docs.jquery.com/Plugins/Validation/Reference#Markup_recommendations. One part I didn't understand is why labels need to be associated with each input. Yes, I understand that labels are created to display error hints, however, these are different labels. I couldn't detect any change on the label tag, and it works fine without it. Anyone know why? Thanks
Each input has a label associated with it: The for-attribute of the label refers to the id-attribute of the input.
<label for="firstname">Firstname</label><input id="firstname" name="fname" />
In this case labelis actually HTML element that adds usability improvement for mouse users where if user clicks on the text within the element, it toggles the control.
In HTML label is an optional element, That means you don't need to provide label for each input
I'm trying to interact with a widget on a webpage, enter data into a form element. But I'm getting an error saying the elements isn't currently visible so cannot be interacted with. When manually interacting with the page, the text box asks you to enter something, then that text goes away when you click on the box and accepts input. I've tried having watir click the box first but that isn't working for me either. Here is the raw html:
<input class="symbol-search ui-autocomplete-input x-defaulttext-ghost" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">`
after I click on the box in my browser that changes to this:
<input class="symbol-search ui-autocomplete-input" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">`
Suggestions? Not possible?
One potential problem is that the input element in your code lacks a 'type' attribute, which is what watir uses to distinguish things like text_field from checkbox (since they are all input elements, but act differently)
Without that type attribute (role doesn't really cut it, it's not even a standard element for an input field, not even in html5, not as far as I can tell
Lacking a type attribute, you won't be able to use most of the standard input types supported by watir, which means you won't have access to a .set method You are likely going to have to address this with the basic 'element' class, and then use something like .send_keys once it has been clicked in order to fire keystrokes at it.
Who's widget is this anyway? do they have a demo page that shows an example of it? that would make it easier for people to discover potential ways to work with the control.
This worked for me:
b.text_field(:class => /autocomplete/).set 'hello'
the problem I have is that I have two sets of values in a drop down list. If type 'A' is selected I want a text box to be populated with a value from the database and be read only. If Type 'B' is selected the box is to be empty and editable.
My original code is written in jsp/struts and I have sort of achieved this by using
onchange="javascript:submit()" to reload the page, but this has the obvious drawback of saving any changes you have made which means you can't really cancel.
I also have other problems with the serverside validation due to this method.
Is there a way of making a jsp page reload on change, that way I could write javascript to change the way the page looks according to the values held in the session. That way the save/submit function will only be called when the page has properly been filled out and the server side validation will work as designed.
I know that this is something that AJAX is good at doing but I am trying to avoid it if possible.
AJAX is your only other option my friend, unless on the original page load you load all the other possible values of the Text Box so you don't need to go back to the database. Well, you could try putting the text box in an IFRAME, but you will probably run into more problems with that approach than just going with AJAX.
Without AJAX what you are asking is going to be difficult. Another option (which is ugly) is to write out all possible values for the second list box into a data structure like an array or dictionary.
Then write some javascript to get the values from the data structure when the user selects from the first list box. The amount of javascript you will have to write to get this done and to do it correctly in a cross browser way will be much more difficult than simply using AJAX.
Not sure why you'd try to avoid AJAX in today's world, the JS libraries out there today make it so simple it's crazy not to try it out.
I just had to replace a page that was written as Vincent pointed out. I assume at the time it made sense for the app, given the relative size of the data 4 years ago. Now that the app has scaled though, the page was taking upwards of 30 seconds to parse the data structures repeatedly (poorly written JS? maybe).
I replaced all the logic with a very simple AJAX call to a servlet that simply returns a JSON response of values for the 2nd drop down based on what was passed to it and the response is basically instant.
Good luck to ya.
One way is to change the form's action so that you submit the form to a different url than the "save" url. This lets you reload certain aspects of the form and return to the form itself, instead of committing the data.
<script>
function reload() {
document.forms[0].action="reloadFormData.jsp";
document.forms[0].submit();
}
</script>
<form action="saveData.jsp" method="post">
<select id="A" name="B" onchange="reload()"><!-- blah --></select>
<select id="B" name="B"><!-- blah B --></select>
<input type="submit">
</form>
If I understand you correctly, that you want either a dropdown (<select>) or a textfield (<input type="text">) depending on a choice (typically a checkbox or radiobuttons) somewhere above in a form?
I that case you may need to handle the two types of input differently on the server anyway, so why not have both the selectbox and textfield in the area of the form with different names and id and one of them hidden (display = none). Then toggle visibility when the choice changes. On the server you pick eiter the selectbox or textarea input (wich will both be present unless you disable (disabled="disabled") them too, wich I think is uneccesary) depending on the choice input.
Of course if you expect that the user usually just need the text-input, and a few times only, needing a massive list; it would be better to use ajax to retrieve the list. But if it's the other way around (you need the text-field only occationally), as I assumed above, it will be faster to have both present in the initial form.
If the drop down only contain easily generateable data, like years from now to houndreds of years back it could even be much faster (requiring less bandwidth on the server) to generate the data client side using a for loop in Javascript.
I know a taglib that can fit to your problem:
AjaxTags.
I use this taglib in my J2EE projects and it is very simple to integrate it into web applications.
This taglib give you several tags designed to execute AJAX request in your jsp files.
Here is the description of each tags: http://ajaxtags.sourceforge.net/usage.html
The tag which will help you is the ajax:select tag. It allows you to populate a select tag which depends on an other field without reloading the entire jsp page.
If you more informations about it, ask me and i'll try to answer quicky.
Along the lines of what Strindhaug said, but if you need dynamic data:
Could you have the backend write JS into the page, and then the JS would change the form as required? The backend could propagate some variables for descriptions and such, and then the JS could change/update the form accordingly. If you aren't familiar with this, libs like jQuery make things like this easier and more cross-browser than rolling-your-own (at least in my experience).
Aside:
If you're not using AJAX because it was hard to code (as I didn't for a while because my first experience was from scratch and wasn't pretty), as others have said, libs like MooTools and such make it really easy now. Also, there is not shame in using AJAX properly. It has a bad rap because people do stupid things with it, but if you can't simply write premade values into the form or you have to do live look ups, this is one of AJAX's proper uses.