Required fields

I need to verify required fields on many different forms and I would like to try to save each form without any data. Application in that case automatically highlighted all requires fields in red and show general message about missing required data. How to check in Katalon that field is highlighted? please help solve

I’d just check that every required field has the ‘required’ property. It’s client side, so if that property is on the field, you can assume the browser will handle it properly.
If you want to check the server side of it, you could just remove all the required properties on the fly and then submit it and check you get the correct response.

I wanted to do through get css, but I didn’t get it

Required isn’t css, so that will make sense… use xpath

There is no need to use an xpath tho.
Just make sure your object is indentified and use the verifyElementHasAttrribute and look for attribute ‘data-val-required’.
If they have this attribute then you can be sure these fields are required.

WebUI.verifyElementHasAttrribute(findTestObject(‘Object_Name’), ‘data-val-required’, 20)
Timeout can be changed.

There is quite some misinformation in this thread.

  1. required is an HTML attribute which is reflected in a property if the page is functioning correctly. A web page developer specifies the attribute not the property.

  2. :required is a CSS pseudo-class selector. This class can be used to style (highlight) elements carrying the required attribute.

  3. Browsers (AFAIK) are not required to perform any styling of required elements. That is a job for CSS and/or JavaScript.

  4. XPath is a locator method used by Katalon/Selenium and completely uninvolved in how a required element might be used operationally or styled in the browser.


  1. data-val-required or anything starting data-* is not part of any web standard but likely introduced by a framework and/or the page developers.

    Not being part of a standard means any code that relies on it, or any code that tries to verify it, must conform to the specifications provided by the same developers.

    Without this information, little more can be said about it. Since the OP never mentioned anything like this, the best advice I can give is to ignore it.

@din.bazarbay If your red highlighting is a css outline or a css border or part of the css background family, all of those can be checked with WebUI.getCSSValue:

If you want to verify the text in the general missing required data message, you can use WebUI.getText:

If the WebUI APIs aren’t enough you can use JavaScript/CSS to locate these elements and do as much verification (or even more than) you ever need.

Some screenshots of your page will help. The devil, as they say, is in the details. Right now, I’m guessing what you might need to choose to achieve your aims.

1 Like