I have a form that is validated by js when the user submits it. My code detects empty and invalid fields (ex 1 number in phone number is obviously an invalid phone number).
I am asked if i could highlight fields missing or in error. I think this would be cool IF i can do it automatically. With HTML like the below how can i make name, phone or whatever else turn red? i cant think of any solution. Maybe i can pull the html body from form find the target input and insert a div on the left side of the input to the prev tag and use that div to make the font red. But i HATE that idea because that requires poking the HTML instead of DOM and i am pretty sure some nastiness will occur. Any ideas?
Name: <input type=text name="Name"/>
Phone: <input type=text name="PhoneNo"/>
Change your HTML to have the <label> surrounding the 'Name' and 'Phone', which will make it more accessible and provide the functionality you're looking for.
HTML
<label for='Name'>Name:</label> <input type=text name="Name"/>
<label for='PhoneNo'>Phone:</label> <input type=text name="PhoneNo"/>
jQuery
$('input').blur(function() {
$('label[for="'+$(this).attr('name')+'"]').css('color','red');
});
Live Example
http://jsfiddle.net/tve8J/
You'll of course have to add your validation, I don't know what you consider and 'invalid field'
You should rather write your HTML to have an element around the labels in the first place. The correct HTML would be
<label for="Name">Name:</label> <input type="text" name="Name" id="Name" />
Then just add a class to the label to turn it red when it should.
By the way, this even makes the input receive focus when the label is clicked! Yay!
such as:
//some javascript validation here
name.style.color = 'red';
phoneNo.style.color = 'red';
?
How about labels with the for attribute? - Check out its documentation here
Related
I have a little challenge when testing a website. Just wanted to see if you folks have any suggestions on this. The story behind this is that I need to mask the input fields for the screenshots when the test has been executed as we are sharing the data with other teams. Before the script I am running JS with 'document***.type="password";', but when script starts to type, then input type is changed back to the type of text. Also, class changes from class="is-invalid" to class="is-focused is-invalid" when it's active. Also, I could of course change the type after I have typed the value, but even tho when I click the next field, the class changes. When I have filled the first input field it checks the data against the server and the class is of course changed.
I have an input field when inactive:
<input ref="input" value="input field" id="id-for-unified-text-input--14fe" name="unified-text-input-14fe" type="text" autocomplete="off" spellcheck="false" placeholder="ABC123" class="is-invalid">
And the input field when active"
<input ref="input" value="input field" id="id-for-unified-text-input--14fe" name="unified-text-input-14fe" type="text" autocomplete="off" spellcheck="false" placeholder="ABC123" class="is-focused is-invalid">
Any suggestions from a fellow testers, how could I fix this? Thanks a lot in advance!
As pretty much evident from the HTML the <input> field whenever recieves the focus_ the classname is-focused added.
This addition of classname is pretty much controled through the attributes, presumably the css_properties of the parent elements.
As as conclusion, it would be difficult to mask the password field characters from the clientside and have to be controled from the Application Server side.
I am trying to use Pattern attribute to do validation on text box.
When ever user entered any of these .....i want to show some validation message.
So i created that element as follows:
<input type="text" pattern="/(<!|&#|<\?|<|>)/" title="Required" required />
When ever i entered any text it is showing the alert...
How to get rid of this?
You were using the wrong pattern. In HTML patterns, you don't need an opening and closing delimiter. Also, the browser checks, if the entered text MATCHES the pattern, but you would need the exact opposite (if I understood it correctly). Try something like this:
<form>
<input type="text" pattern="^((?!(<)|(<!)|(<\?)|(&#)|(>)).)*$" title="Required" required />
<input type="submit" />
</form>
i'm coming from Java background, Is there a label in HTML, where I could using for example javascript update the value.
I mean by label here, something similar like text input, but not not possible to update it, and it looks non-updateable.
You said you wanted something similar to a text input, so... use one, then! Just disable it, like
<input type='text' disabled>
^It's MAGIC!
You don't want label literally in HTML, because it's in no way similar to a text input. Labels in HTML are used for things like putting text in front of radio buttons.
If you wanted something similar to a Java label, you would just use the p tag, unless it would be behind a text input or so, then you would use the label tag.
The obvious to create a label would be using <label>
<label for="coward">Förnamn</label> <!-- points to to input element with id coward -->
<input class="text-input" name="coward" type="text" id="coward" value="whatever" />
But I think you're looking for something to "store a value in a form" that shouldn't be editable. You could use a hidden text input for that.
<input type="hidden" name="hiddenField" value="whatever" />
You could use divs (and style it the way you want it), and then just fetch the html from that div.
Take a look at the other answers as well.
There's a lot of options. What do you actually want to do? It would be easier to give you an answer that suits your needs.
A label is a <label>...
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label
You have a couple of options.
There is actually a <label> element, which is typically used for labeling the items in a form.
You could also do a text input (<input>) and set it to disabled:
<input disabled>
Or you could just use a simple paragraph element <p> and style it how you want.
Here is a JSFiddle with some examples: http://jsfiddle.net/QXP75/
However, you'd want to use something semantic, so knowing what the purpose is would allow a more specific message. Also, with CSS, you can make just about any element look like anything.
I'm working with java and I have a text box which I read data from a database into. So for example, the name "John" loads into the text box. I have the code
<input class="classText" name="fName" id="fname1" type="text" value=""/><br />
but what I'm wanting to do is keep the word that's loaded into the textbox black and change the color to blue when I try to enter text into that text box. So for example,
The word "john" is loaded in the text box...I delete the word John and type in Max. Max should be blue.
Hope that's not too confusing. Any help?
You can use onkeypress event
<input class="classText" name="fName" id="fname1" type="text" value="" onkeypress="changeColour(this)"/><br />
and define function
<script>
function changeColour(e)
{
e.style.color='blue'
}
</script>
Working fiddle
Or better assign some class on key press
Use css for styling.
#fname1:focus{color:blue}
http://jsfiddle.net/BC5RP/
The fact that your backend is Java is irrelevant here - you're dealing with the UI only.
There are several approaches to this. The one on this fiddle example uses JQuery's on(input).
$('.classText').on('input', function() {
$(this).addClass('changed');
});
I was wondering if someone knows what controls the showing of previous form field entries in a form.
So for example, if in the name field, I go to type 'John' it appears below the field. Is that a feature of the browser or is it javascript or something?
Also, if it is the browser, is there a way I can turn this off for a given form?
You might be looking at autocomplete, if so turn it off with autocomplete="off" within the HTML of the relevant field:
<input type="text" name="firstname" autocomplete="off" />
References:
input element.
It's made by the browser, if you're working with HTML5 you can set a attribute to the input-element to remove it.
<input type="text" autocomplete="off" />