Refuse space only input with ng-required - javascript

Is there a simple way to make inputs and textareas with the ng-required attribute set to true invalid if it contains only spaces or blank characters ?
I'm looking for a generic way that would be applied to all my fields.
Note : I'm using angular 1.5.5

There is a way that you can set "ng-required=checkVar" and all input field you want to be validate in the same way can be put same class (class tag), e.x: class="check". Then you can bind an event handle function to all these fields as:
$('.check').on('click', function(e){
do your work (validating)
if (validated)
$scope.checkVar = true;
else
$scope.checkVar = false;
}
This is my idea.

Ok, so in the end I didn't manage to find a generic way.
I had to change every template, but it can be done quickly using the replace option of any IDE.
I replaced every <textarea occurences with <textarea ng-pattern="/^(?=.*\S).+$/"
So, ng-pattern was my solution choice, there's probably a better way though.

Related

Filling Input fields having credit card formatting using js

I was wondering if there is a way to fill the input fields having type text and have inbuilt js event to evaluate what is being entered means, when a user types in any number it evaluates and checks the type of card and also put automatic spaces in between. But while setting the value with javascript i.e. element.value = 'xxxxxxxx'; the formatting doesn't happen and the site evaluates the card number invalid. so how to programmatically achieve this. I am working on an extension which could auto fill card details.
I have tried using element.dispatchEvent(Keyboardevent) but it won't work.
the website on which i am trying is made on top of angular.
I have found a workaround. It was something like changing the value and then dispatching an event. Since I was working with angular I needed to dispatch input event. Related codes are:
element.value = 'anything';
//dispatching input event after setting value ( tested for angular)
element.dispatchEvent(new Event('input')) ;

Angular 9 dynamic ngx-mask issue

I have the following input
<input
[(ngModel)]="myInput"
mask="00-0000-0000||00-00000-0000"
type="text"
>
and I would like to initialize it with a certain value. Let's say 12-12345-1234.
This doesn't work since I only see 12-1234-5123 (The last digit is cut out of the html input and the shortest possibble mask is being used).
I would like to be able to initialize my input with any valid value and see the correct mask applied to it.
To setup a DOM initial Value, you can use the value attribute on the HTML template:
<input type="text" value="any-value-here">
The mask you are trying to use is a production of DOM manipulation logic. It will be achived by running JavaScript code, which modifies the DOM, and depending on the framework you use, or the lib you create the input mask effect, will always overwrite that 'initial' value.
In you case, using [(ngModel)] is not a strict initialization: it's already a value binding "event" made by angular as far as I know. To test your logic, I think it would be a better approach to create tests, or add the mask dynamically to the field if possible.

Trying to use XPath for auto testing in (fillField)

Try to test some Fields and when i check "Inspect element" to identify id or name of Fields but there was only class that didn't work so i decided to use XPath for example:
$I->fillField('/html/body/div/form/div[2]/div[3]/div/div[1]/label/span[1]','GRV');
And gets Failures and Error:
1) Couldn't sign in in Authorization
Ups, I couldn't fill field "/html/body/div/form/div[2]/div[3]/div/div[1]/label/s
pan[1]","blabla",
Field by name, label, CSS or XPath '/html/body/div/form/div[2]/div[3]/div/div[1]
/label/span[1]' was not found on page.
I checked few times XPath, can't test this fields. It would be great if you tell what a problem and how to solved it.
You try to fill a label, not the input element:
//label/span[1]
Make sure to select the input field you want to fill instead. Look for an <input id="foo"/> if your label has an for-attribute with value "foo".
Well, avoid usage of this kind of XPaths. It's really toooo loooong. You just break your mind and ours too trying to solve it :) Just add #id selector to the element you are matching and be happy.
The test with such XPath will break on every markup change of your page. Why would you need a test that is such hard to maintain?

Jquery validation engine ajax, two fields same function?

The jQuery validation engine plugin has the ability to do ajax validation; which works gret except for one small catch...
It sends off the field ID instead of the field name to be validated.
Why is this an issue?
I have a simple item that to create it only requires one textbox to be filled out; so we have this as a modal on every page for managing said item.
We use the jQuery validation engine plugin to validate that the entered value is unique.
Now this also means that the modal shows up on the edit page. Which obviously has the title in a field as well for you to edit.
And we want this field to be validated as well but because the validation engine sends across the field ID instead of the field name we must give the two fields different ID's
e.g. createtitle and edittitle and then on the backend have
if($fieldId == 'createtitle' || $fieldId == 'edittitle'){$fieldId = $fieldId}
Which really is an ugly approach; is there any way to get it to use the name; or another attribute instead?
Maybe this plugin could help you. It uses class names of your element to validate.

Javascript form input field selection and AJAX

I think I want to do something simple, but I'm not sure how to execute it. I have been trying for hours now, with little luck.
function myFunc (form) {
// determine currently selected field on form - Thank you James!
var currElem = document.activeElement;
myAJAX_request(); // This will regenerate the form (no field selected)
// restore currently selected field on form
currElem.focus(); // This does NOT work -- WHY?
currElem.select();
}
I'm looking for a clean implementation that will use "document.forms..." to find the input fields, instead of having to put an id tag on every single form element. Is this possible?
You can use framework such as jQuery. jQuery has .serialize() method that should do exactly what you need. Here it is
You could use document.getElementByName. I do assume you have names for your fields atleast, don't you ? Store them in a variable/cookie and retrieve it back after your myAjax_request().
and to make your life easier in future,
You could use other selectors of jquery, like name, class, etc.
Read about jQuery's selectors here.

Categories