Develop Reference

How to get this element from an email type input with Cypress

I need to validate the message that the user receives when entering an invalid email (without using #, for example) but the element does not exist in the DOM tree and so far I have not found any way to get this text.
Element to be caught
So far I've tried to treat the "alert" as a tooltip or popup but in no way that I found on the internet could I get this value

You can try CSS pseudo class for that. Below I'm giving one blog read from Gleb which highlight different techniques for HTML form validation:
Your code will be look more or less similar to this after that:
cy.get('#form-validation').within(() => {
cy.get('#email').invoke('prop', 'validationMessage')
.should('equal', 'YOUR TEXT IN THE ERROR MESSAGE...')
}
Gleb's Blog: https://glebbahmutov.com/blog/form-validation-in-cypress/

Change source of image field with javascript in Adobe Acrobat

I have a listbox in an Adobe Acrobat form. When I change the value of the listbox, the source of the image field has to be changed with a javascript script:
As a first step, I tried to change the src in javascript, so not yet with the listbox:
var logo = this.getField("companylogo"); // button field
logo.buttonImportIcon("C:\Users\VincentJanssens\Downloads\Blauw.png")
But even this code isn't working.
Thank you for getting me started!

The code can be very simple if you set the fields up to allow for that. The first step is to create buttons for each of the images you want to be available. Name these buttons such that the Export Value of the item in the Dropdown matches exactly. Set these buttons to Hidden and Read Only in the General tab.
Then add a button where you want the various images to appear on your form. Set this field to read-only too. Now, set up the Dropdown to Commit the selected value immediately and add the following JavaScript to the Format script of the dropdown. Replace the string 'displayImage' with the name of the button field you placed on your form.
this.getField("displayImage").buttonSetIcon(this.getField(event.target.value).buttonGetIcon())
Now each time the list item changes, the script will run and use the Export Value of the field to get the button icon from the button with the same name as the export value.
I've posted a working example file here.

jquery validation plugin detects errors, but no messages appear, why not?

I'm using the jQuery Validator plugin 1.19.5 on a slightly large (but simple) form generated from a PDF by an online converter to html5
The form has a Submit button implemented as a button with onclick to a javascript function within the formviewer.js file that is part of the conversion to html5. If I open the form in Chrome 107.0.5304.107 Developer Tools, I can see that the Submit button goes to the following code that I added to the success branch of the function that handles the submit in formviewer.js:
success: function() {
const OSHform=$("form").eq(0);
if (OSHform.valid()) {
top.document.location.href = "/Adsentry/completed";
}
else {
alert("Fields did not validate, please fix errors and try again");
}
},
failure: function() {
alert("Form failed to submit, please try again")
}
In a separate script, I invoked validate() on the form element, passing it rules for the fields to validate.
var $j = jQuery;
var OSHform = $j("form");
OSHform.validate({
rules: {
"NAME OF DRIVER": "required",
"EMAIL": "required",
"EMAIL": "email",
"ADDRESS": "required"
}
});
If I omit required fields, or enter an invalid email address in an email field, the call to valid() returns false. And in fact, if I look at the input elements in the Elements tab, I can see that class="error" gets added, and if I correct the error it changes to class="valid". Additionally, with class="error", a label gets added for that element, also with class="error", and correcting the problem adds style="display:none;" to the label.
So everything is great, except that there is no text or message that goes with the label, so its presence/absence, or the presence/absence of display:none on it, has no effect on the normal display of the page.
I have tried stepping through the code in the debugger, but I'm afraid my javascript is so weak I can't really figure out what's going on to the extent of understanding why the messages are not being displayed.
You can play with it live here for the time being, but I can't promise to stop fiddling with it! There are currently only 3 required fields: Name of driver, Address, and Email. If they are all correct, the form submits as intended.

A little disappointed that this didn't even get any comments, let alone answers. On the other hand, it turned out the answer was exactly as anyone even slightly more experienced than me would likely have guessed: errors were being reported in HTML elements, but there was no CSS to put them in the right location on the page. The plugin seemed to be buggy in failing to produce default message text describing the errors; instead, it just produced message text that was simply the name attribute of the erroneous input element. But without appropriate CSS, that name attribute was output in the black strip at the bottom of the page, making it essentially invisible. It took a sharp eye to notice the sudden appearance of "fly specs" at the bottom of the page when clicking the submit button.
The plugin just inserts an HTML element into the DOM immediately following the bad input element. But the files generated from the PDF include a style sheet with selectors using the ID of each input element to give the input element absolute placement on the page. And simply inserting an element into the DOM as the next sibling of the input element, without a style, results in having it rendered at the bottom of the page. Even when I figured out that the lack of CSS was the problem, it took me a while to get something that worked: good old selector specificity in action. All of the input elements were placed using ID selectors with absolute position, and I could find no way to have the simple next-sibling relationship of the message to the input element cause the message to be rendered immediately after the input element. Although it made me feel "icky" to do it, the solution I came up with was to use jQuery to iterate over all the message elements with the "error" class, get the ID of the input element it was reporting, and then use $.css() to get the input element's effective top, left, and width style attributes. Then strip off the trailing "px", multiply by 1 to get a numeric value, add the width to the left numeric value, and specify new top and left attributes using $.css() on the message elements. This put the messages I defined in the messages sub-object of the object passed to the validate constructor appear in the right locations. It only remains a mystery why the default messages didn't appear instead of the names of the input elements for elements that were invalid.

Pointing to first field after validation

I have a webpage which has check-boxes, input fields, dropdowns etc.,
Mandatory conditions are checked using javascript. If anyone fails to fill these fields and press next button validation errors popup.
Now what I want to achieve is when someone fails to enter information in the mandatory fields, the cursor should go to the first field which caused the error.
Can anyone suggest me how to do this?

Add a class (something like input-error) for every invalid field. Then use something like:
var errors = document.querySelectorAll(".input-error");
if (errors.length > 0) {
errors[0].focus();
}
Here's an example: http://jsfiddle.net/NtHzV/1/
It really all depends on the structure of your code, how you're validating, what you're actually doing with validation, and what your HTML is.
At the same time, if you're doing something similar to my example, you might as well keep track of the first input with an error, then focus() it at the end of validation. Something like this:
http://jsfiddle.net/NtHzV/2/
UPDATE:
Bergi pointed out that querySelector might as well be used (instead of querySelectorAll) because you're only looking for the first input with errors. So here's an update:
var error_input = input_area.querySelector(".input-error");
if (error_input !== null) {
error_input.focus();
}
http://jsfiddle.net/NtHzV/3/
Here's specs on querySelector: https://developer.mozilla.org/en-US/docs/DOM/element.querySelector - Note that < IE8 does not support it.
The use of ".input-error" is because that is the CSS class selector, and will find the first (if any) element in a specific area with the class "input-error".

This line will focus the page on the element you specify. You should be able to implement this into your validation checks to focus on the bad elements.
document.getElementById("ID_Of_bad_field").focus();

How can I display an error message via JavaScript?

I'm creating a form, and I'm validating it with JavaScript. The way it works now, is if a value is not correct, it displays an alert stating that you need to enter text. My question is, how can I change it so that instead of an alert, the text box will turn red, and something like: "This is required" will show next to the textbox. I think I can solve this with jQuery, but I was wondering if anyone had any suggestions. THANKS!
P.S. If you go to yahoo.com, click Sign Up, and click Create Account (without entering anything), you'll see what I'm aiming at.

You could create a CSS class with the following properties:
input.ERROR { border-color: red; }
Using jQuery, you can add this class to the input box with the incorrect value:
$("input[name=Address]").addClass("ERROR");
(assuming the input box with the name "Address" had the wrong value)

Well , I would use a jQuery Validation plugin which is at
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
You just need to add the css class "required" to the elements that you need to be validated