Javascript CSS 3验证不起作用

嗨，我正在尝试使用这个多步骤表单。在为表单字段添加css 3验证时，这不起作用。当尝试添加css 3时，它会继续转到下一页，而不是验证字段。有人能帮忙吗

 <!-- multistep form -->
 <form id="msform">
    <!-- progressbar -->
    <ul id="progressbar">
    <li class="active">Account Setup</li>
    <li>Social Profiles</li>
    <li>Personal Details</li>
   </ul>
   <!-- fieldsets -->
  <fieldset>
    <h2 class="fs-title">Create your account</h2>
    <h3 class="fs-subtitle">This is step 1</h3>
    <input type="text" name="email" placeholder="Email" />
    <input type="password" name="pass" placeholder="Password" />
    <input type="password" name="cpass" placeholder="Confirm Password" />
    <input type="button" name="next" class="next action-button" value="Next" 
    />
  </fieldset>
  <fieldset>
    <h2 class="fs-title">Social Profiles</h2>
    <h3 class="fs-subtitle">Your presence on the social network</h3>
    <input type="text" name="twitter" placeholder="Twitter" />
    <input type="text" name="facebook" placeholder="Facebook" />
    <input type="text" name="gplus" placeholder="Google Plus" />
    <input type="button" name="previous" class="previous action-button" 
    value="Previous" />
    <input type="button" name="next" class="next action-button" value="Next" />
    </fieldset>
    <fieldset>
    <h2 class="fs-title">Personal Details</h2>
    <h3 class="fs-subtitle">We will never sell it</h3>
    <input type="text" name="fname" placeholder="First Name" />
    <input type="text" name="lname" placeholder="Last Name" />
    <input type="text" name="phone" placeholder="Phone" />
    <textarea name="address" placeholder="Address"></textarea>
    <input type="button" name="previous" class="previous action-button" 
    value="Previous" />
    <input type="submit" name="submit" class="submit action-button" 
    value="Submit" />
    </fieldset>
    </form>

CSS

---

代码可以在这里的画笔上看到：

如果你真的想在CSS中做些什么，那么你可以根据条件设置输入的样式。但这在较旧的浏览器中不受支持

/* disbale the next button when inputs are invalid */
#msform input:invalid + .next.action-button {
  opacity: 0.5;
  pointer-event: none;
}
/*
* When input is...
* 1. NOT empty
* 2. NOT in focus
* 3. NOT valid
*/
#msform input:invalid:not(:focus):not(:placeholder-shown) {
  border: 1px solid red;
}

这需要您调整HTML以在输入中包含必需的属性，并且您应该将电子邮件字段的类型更改为“email”

<input type="email" name="email" placeholder="Email" required />

其他类型的列表可在此处找到：

您还可以对输入使用“模式”属性来验证：

<input type="text" name="name" placeholder="Name" pattern="[A-Za-z]+" required />

---

更多有用的信息可以在这里找到：

嗨，伙计，你回答这个问题了吗？CSS不能进行数据验证和控制这些交互，你应该使用Javascript。我做过CSS 3可以做这类事情。我查过了。如果我们添加required functiob，它就能够做到这一点。将

required

属性添加到元素本身与CSS3没有多大关系。您可能可以根据元素当前是否处于无效状态而对其进行不同的样式设置，但这不会改变验证的基本工作方式。你的实际问题是什么，目前还不清楚——至少对我来说是这样。所以，请描述一下你到底添加了什么使这个“突破”。嗨，我想做的就是验证这里的字段。谢谢你尝试一下，让你知道Martin

<input type="email" name="email" placeholder="Email" required />

<input type="text" name="name" placeholder="Name" pattern="[A-Za-z]+" required />