I'm doing a validation in javascript and need to create a floating div for each field when submitting the form
I'm using blur to check the field, but do not know how to create a floating div
would be as in the diagram below
someone has an idea?
[field 1] [float error message]
[field 2] [float error message]
[field 3] [float error message]
Append the floating div after the field that was blur'd like so
$('input[type=text]').blur(function() {
// do your validation
if (error) {
$('<p>')
.text('Validation Error: '+error)
.css('float', 'left')
.insertAfter(this);
}
});
IMHO it's best to keep all styling in CSS. I would personally replace the ".css()" call with ".addClass()", then setup a style rule that floated the error messages. If this approach was used, and the fields were originally wrapped like this:
<div class="field">
<label>Name:</label>
<input type="text" name="name" placeholder...>
</div>
<div class="field">
<label>Email:</label>
<input type="text" name="email" placeholder...>
</div>
...
Then clearing the validation would be as simple as:
$(this).siblings('.validation-error').remove();
If you are asking for technique, then any in-line element after the field element will do the trick. Ex.
<input type="text" name="firstName"><span>show on error</span><br />
<input type="text" name="lastName"><span>show on error</span><br />
<input type="text" name="empId"><span>show on error</span><br />
make these errors hidden initially (through styles) and show/hide them by script on validation as,
if(err_cond_of_elem)
$(elem).next().show();
else
$(elem).next().hide();
Edit:
If your errors are dynamic then you can add them by .html() metod of JQuery
$(elem).next().html(custom_err_message).show();
Since you have not provided any markup or code, I'll provide a pattern for my response.
Here's how I would do this.
1.) Create your form with text inputs and error message in your markup. So the markup could be something like:
<form id="whatever">
<fieldset>
<input type="text" id="1" value=""/><div id="error1">text for error 1</div>
<input type="text" id="2" value=""/><div id="error2">text for error 2</div>
<input type="text" id="3" value=""/><div id="error3">text for error 3</div>
</fieldset>
..
..
</form>
2.) Create your css to float text inputs left. The error divs could be set as display:none, float:left; This would make sure error messages are hidden when page loads and float properly. Also, my philosophy is to let HTML do HTML and CSS do CSS and JS do JS. So rather than manipulating the dom with jquery, just place markup and content on your page and use css to handle initial visibility and positioning. No need to do that with js.
3.) Then, in your method to check input values on blur, if the validation detects an error, all you have to do is show the corresponding error with .show(). Then as the user works to correct the input and passes your validation check, set the corresponding error to .hide().
Related
I'm starting to learn Cypress. I want to select the input field and provide the phone number by using cypress.io. The code I have following but it does not work. However can I using find or there is another way to get the input element to type in phone number?
cy.get('div').contains('Phone Number').find('input[name=teacher[0].number]').type('8000-1612023')
<div class="required field">
<label>Phone Number</label>
<div title="Teacher number" class="ui fluid right labeled input no-spinners">
<input required="" type="number" name="teacher[0].number" value="">
<div class="ui label label">US</div>
</div>
</div>
Why don't you directly target the input field using the following code
cy.get('input[name="teacher[0].number"]').type('8000-1612023')
Please find the screenshot below for a successful test. I would also recommend you to change the type of input in your HTML to tel
HTML:
<input required="" type="tel" name="teacher[0].number" value="">
Cypress:
describe('Trial', function() {
it('Test', function() {
cy.visit('http://localhost:8080/trials/')
cy.get('input[name="teacher[0].number"]').type('8000-1612023')
})
});
Test Result:
Try this instead:
cy.contains('div', 'Phone Number').find('input').first().type('8000-1612023')
The first argument to contains tells cypress to find the element with that selector that contains the text.
I write selectors with the input tag as below and it worked for me.
cy.get('input[name="elementName"]').type(val)
Check this to learn best practices when selecting elements:
https://docs.cypress.io/guides/references/best-practices#Selecting-Elements
In this post about the angular text editor called textAngular.
I would like to find the textarea element of the directive text-angular. Because it uses bootstrap design and i would like to replace the element to angular-material textarea.
But i have no idea where did the developer place it inside the file.
UPDATE
I cant do an outside css or overriding it css attribute since angular-material textarea doesnt have a css styling approach.
Textarea elements are being referred to by using the value of the ng-model attribute.
Also you if you have unresolved problems you can always create a custom css and load that last which will override all others.
You can also use expressions if you do not want to override the bootstrap.
As such.
<input type="button" value="set color" ng-click="myStyle={color:'red'}">
<input type="button" value="set background" ng-click="myStyle={'background-color':'blue'}">
<input type="button" value="clear" ng-click="myStyle={}">
<br/>
<span ng-style="myStyle">Sample Text</span>
<pre>myStyle={{myStyle}}</pre>
More can be read for all the different ways it can be used at Angulars Website https://docs.angularjs.org/api/ng/directive/ngStyle
Update: getting back to CSS overrides.
elements inside an AngularJS application are given certain classes. These classes can be used to style textarea elements according to their state.
The following classes are added:
ng-untouched The field has not been touched yet
ng-touched The field has been touched
ng-pristine The field has not been modified yet
ng-dirty The field has been modified
ng-valid The field content is valid
ng-invalid The field content is not valid
ng-valid-key One key for each validation. Example: ng-valid-required, useful when there are more than one thing that must
be validated
ng-invalid-key Example: ng-invalid-required
The classes are removed if the value they represent is false.
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<style>
textarea.ng-invalid {
background-color:pink;
}
textarea.ng-valid {
background-color:lightgreen;
}
</style>
<body ng-app="">
<p>Try writing in the textarea field:</p>
<textarea ng-model="myName" required>
I am disabling the inputs using the isFetching prop,
but this is getting reduntant as I have to keep this in every input field.
Is there a way to disable the entire form?
Like a disable property in <form> tag or something?
<form>
<input type="text" disabled={this.props.isFetching} />
<input type="text" disabled={this.props.isFetching} />
</form>
I think this should solve your problem https://stackoverflow.com/a/17186342/3298693.
You should insert your form inside an element <fieldset disabled="disabled">. This will make the whole form disabled.
I had the same issue and this worked for me:
<fieldset disabled={true}>
Where true would be some "prop.setting"...
Just use <input type="text" disabled> wherever you want the input text to be disabled. It hardly takes some time.
I am extending the functionality of a Business Intelligence tool. This is a web based application. Currently attempting to create some type of "form" validation. The strange thing is that this application reuses the same input for every single one of the form inputs. Once the user clicks away from the input html object, some javascript moves the value entered into the input into the text within a div.
Before:
<div>
</div>
Input filled out:
<input type="text" value="this is a test">
Result:
<div>
this is a test>
</div>
Is there any way to create a listener which will validate what is written inside of the div?
try this
<input type="text" value="this is a test"/>
instead of
<input type=text value=this is a test></input>
hope this helps...
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