Update invalid doc

primefaces · Apr 1, 2024 · 39f84ff · 39f84ff
1 parent d70a74a
commit 39f84ff
Showing 1 changed file with 5 additions and 5 deletions.
diff --git a/components/doc/autocomplete/invaliddoc.js b/components/doc/autocomplete/invaliddoc.js
@@ -13,7 +13,7 @@ export function InvalidDoc(props) {
 
     const code = {
         basic: `
-<AutoComplete value={value} suggestions={items} completeMethod={search} onChange={(e) => setValue(e.value)} className="p-invalid" />
+<AutoComplete invalid={value.length < 1} value={value} suggestions={items} completeMethod={search} onChange={(e) => setValue(e.value)} />
         `,
         javascript: `
 import React, { useState } from "react";
@@ -29,7 +29,7 @@ export default function InvalidDemo() {
 
     return (
         <div className="card flex justify-content-center">
-            <AutoComplete value={value} suggestions={items} completeMethod={search} onChange={(e) => setValue(e.value)} className="p-invalid" />
+            <AutoComplete invalid={value.length < 1} value={value} suggestions={items} completeMethod={search} onChange={(e) => setValue(e.value)} />
         </div>
     )
 }
@@ -48,7 +48,7 @@ export default function InvalidDemo() {
 
     return (
         <div className="card flex justify-content-center">
-            <AutoComplete value={value} suggestions={items} completeMethod={search} onChange={(e) => setValue(e.value)} className="p-invalid" />
+            <AutoComplete invalid={value.length < 1} value={value} suggestions={items} completeMethod={search} onChange={(e) => setValue(e.value)} />
         </div>
     )
 }
@@ -59,11 +59,11 @@ export default function InvalidDemo() {
         <>
             <DocSectionText {...props}>
                 <p>
-                    Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.
+                    Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.
                 </p>
             </DocSectionText>
             <div className="card flex justify-content-center">
-                <AutoComplete value={value} suggestions={items} completeMethod={search} onChange={(e) => setValue(e.value)} className="p-invalid" />
+                <AutoComplete invalid={value.length < 1} value={value} suggestions={items} completeMethod={search} onChange={(e) => setValue(e.value)} />
             </div>
             <DocSectionCode code={code} />
         </>