ReactStrap Input Validation
Hey there! I am trying to implement validation in my form. I am using ReactStrap in my app. However, the validation isnt working for valid or invalid input. Below is what I have done. Valid ={boolean} does not give an error message (but does not work) whereas invalid gives an error message that says invalid requires a string as you can see in the error message below.
Any help is appreciated.
<FormText>Valid PPSN: 7 digits followed by a letter</FormText>
<FormFeedback valid={false}>
You will not be able to see this
</FormFeedback>
<FormFeedback invalid={true}>
You will be able to see this
</FormFeedback>
As the error clearly mentioned, you need to use string for invalid. It's basically a message to tell why the field is invalid.
I'm not completely sure if you even need valid.
Related
I have
Parsing erros: Unexpected token, expected ","
in the project I code in codesandbox.io. I have just connected codesandbox project into github repository and it throws such error which I cannot figure-out.
Can You please suggest what is wrong and how to fix it?
Please don't post screenshots of code. It's usually actually faster to just copy-paste in your code, and you can use three backticks both above and below the code to format it correctly.
Trust your error messages to point you in the right direction: it's telling you that your exclamation mark is invalid. The ! is a non-null assertion operator, it doesn't belong there because you're not accessing a property that TS might think is null. The parser thinks you meant to do something like (rootElement, !someOtherThing), hence the error saying it expected a comma.
I'm new to using react-hook-form and after lots of research I stil cannot understand what I'm I doing wrong. I did a sandbox in which I have a simple input number.
How I would like my form to behave : I want the default value (16) to show and I want the errors below the input to show when the number does not respect the given rules (when the number is not between 16-99).
Can someone please help me understand? I'm going crazy! :s
Here is the sandbox link : https://codesandbox.io/s/crazy-northcutt-8wt6p?file=/src/App.tsx
Change the value of TextField's value to render's parameter value. Also add submit button in order the validation work.
I've forked your code for detailed code
https://codesandbox.io/s/heuristic-fire-eroqv
I'm currently using angular-schema-form (https://github.com/json-schema-form/angular-schema-form) to generate forms based on json schema. The form generates as expected but while validating it gives me an error "Please add error message for tv4-xxx" along with the actual validation message.
Note: My work code uses UI-Bootstrap instead of Bootstrap if that matters.
Things that I've tried:
Created a local code and imported all of it's required dependencies and ran the application. I'm able to successfully validate the form fields with the appropriate error message and I do not get "Please add error message for tv4-xxx" error message.
My work code uses bower to add all of it's dependencies and as far as I'm aware it has added all of the required dependencies in the code but it still gives this error.
Screenshot of the error:
Validation error message
Expected is the actual validation error but it returns the message "Please add error message for tv4-xxx" along with the actual validation error which is undesirable.
Turns out that our angular app was validating twice, once by angular-auto-validate library and TV4.js which is used internally by angular-schema-form.
The error codes sent out by angular-schema-form were not recognized by angular-auto-validate and hence was getting "Please add error message for tv4-xxx".
Disabling the validation solved the problem.
I have one problem with form and ng-form.
Here is the sample https://jsfiddle.net/HB7LU/12182/
What I would like to do is display group messages.
eg. If I have 3 items and any are invalid then show the error message outside of ng-form.
I don't want to repeat every error message under input. If 3 inputs with name 'number' is invalid, I want to display only one message.
Does anyone have any ideas how to achieve this?
I figure it out.
https://jsfiddle.net/HB7LU/12189/
it works with angular 1.3+
but if someone have better solution I will like to see it.
Thanks.
I m Using following assertion to read the validation message in POM but sometimes testcases may give different Validation message which makes TestCase fail , i want to get that Validation message if the testcase fails so that i can debug easily
// Assert whether Account Created Successfully or Not
WebElement element = driver.findElement(By.xpath("//html/body/table[2]/tbody/tr/td/form/table/tbody/tr/td/font"));
String strngAcc = element.getText();
System.out.println(strngAcc);
Assert.assertEquals(" Account Information Created Successfully", strngAcc);
If the Validation got was "Account Already exists" , the Testcase fails indicating that
xpath could not found //html/body/table[2]/tbody/tr/td/form/table/tbody/tr/td/font
i want to capture that validation "Account Already exists" .
please provide me a way to pick the validation actually displaying
PS : I Dont want to go with Screen Shot Capture method
Please don't use xpaths that are too literal in the placement in the html code because by doing this, your tests become brittle and can easily break (e.g. if the structure of the dom changes a bit).
It sounds like the xpath of the correct validation message and "Account Already exists" message are different...What does the structure of the elements look like in html? Again, your xpath may be too specific. Could you give more info?
Your problem isn't the assertion, it's fact that WebDriver cannot find the element it's looking for with that xpath.
Rather than using this absolute XPath, you should look for better ways to find the element you're looking for. Do any of the elements the validation error have specific ID's that you can search for? You'll have to post a snippet of the HTML if you want any more specific help than that.