基础 CSS 遵守错误状态

Foundation CSS是由 ZURB 于 2011 年 9 月创建的开源和响应式前端框架，可以轻松创建可在任何设备上运行的令人惊叹的响应式网站、应用程序和电子邮件。许多公司，如 Facebook、eBay、Mozilla、Adobe，甚至迪士尼，都在使用它。该框架基于bootstrap，类似于SaaS。该框架建立在类似 Saas 的引导程序上。它更加复杂、灵活且易于定制。它还带有 CLI，因此很容易与模块捆绑器一起使用。它提供了 Fastclick.js 工具，用于在移动设备上更快地呈现。

遵守基础 CSS 是一个表单验证库，用于使用自定义验证器验证表单。 Foundation CSS Abide Error State 用于指定表单中特定字段的输入处于错误状态。当需要该字段或用户输入无效的表单详细信息时，它会很有帮助。

基础 CSS 遵守错误状态类：

• alert callout ：用于在字段处于错误状态时显示红色警告框。
• is-invalid-input ：根据使用的输入标签检查输入是否有效。
• form-error is-visible ：显示该字段是必需的。

基础 CSS 遵守错误状态属性：

• data-abide ：此属性用于定义使用 abide 验证表单。
• 数据遵守错误： 此属性用于指定元素处于错误状态。
• type = ”hidden” ：这种类型的属性用于隐藏元素。
• type = ”reset” ：这种类型的属性用于重置/清空表单。
• disabled ：这种类型的属性用于禁用元素的任何输入。

句法：

    
  
    
    ...
    ...

示例 1：此示例说明了 Foundation CSS 中的 abide 初始状态。

HTML

    

  Foundation CSS Abide Initial State
  
  
  
  
  
    

    

     GeeksforGeeks 
    
    Foundation CSS Abide Initial State
    
    
      
        There are some errors in the form.
      
      
        GFG Courses 
        
        This field is required.
      
      SUBMIT 
      RESET
     
    
    
      $(document).ready(function () {
          $(document).foundation();
      })
    
  

输出：

基础 CSS 遵守错误状态

示例 2 ：此示例说明了 遵守 Foundation CSS 中的错误状态。

HTML

    

  Foundation CSS Abide Error State
  
  
  
  
  
  

    

  
    GeeksforGeeks 
    
    Foundation CSS Abide Error State
    
    
       
        There are some errors in the form.
       
        GFG Courses
        
        
              This field is required.
        
        SUBMIT 
        RESET
     
    
    
      $(document).ready(function () {
          $(document).foundation();
      })
    

    

输出：

基础 CSS 遵守错误状态

示例 3：此示例说明了在 Foundation CSS 中禁用输入标签的遵守错误状态。

HTML

    

  Foundation CSS Abide Error State
  
  
  
  
  
  

    

  
     GeeksforGeeks 
    
    Foundation CSS Abide Error State
    
    
      
        There are some errors in the form.
      
        GFG Courses (input field disabled)
        
        
             This field is required.
        
        SUBMIT 
        RESET
    
    
        $(document).ready(function () {
          $(document).foundation();
        })
    
  

输出：

基础 CSS 遵守错误状态

参考： https://get.foundation/sites/docs/abide.html#error-state