Semantic the use of events for validation controls in the UI

Source: Internet
Author: User

1.Semantic UI in the validation of the control, the function is very good, the document written in the civil service is more detailed, I will not repeat here, mainly to say about the use of its events, this may have some friends just start contact when not very understanding

Note These events: The first two are calls to the field validation pass and the event after the failure, and the last two are the events that are invoked when the entire form is validated or failed, so we can write this when we call

        function login ()        {            $ (". Ui.form"). Form (                {                    username: {                        identifier: ' username ',                        rules: [                            {                                Type: ' Empty ',                                prompt: ' User name cannot be empty '                            } '                    },                    Userpass: {                        identifier: ' Userpass ',                        rules: [                            {                                type: ' Empty ',                                prompt: ' user password cannot be null '}}                  }}, {                    onsuccess:function () {                        alert ("Succeeded! ");                    }                }                );        }    </script>
<%@ Page Language="C #"AutoEventWireup="true"CodeFile="Login.aspx.cs"Inherits="Login" %><!DOCTYPE HTML><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Headrunat= "Server">    <title></title>        <Scriptsrc= "Scripts/jquery-1.8.2.js"></Script>    <Linkhref= "Js-ui/packaged/css/semantic.css"rel= "stylesheet" />    <Scriptsrc= "Js-ui/packaged/javascript/semantic.js"></Script>    <Script>        //Login Verification        functionLogin () {$ (". Ui.form"). Form ({username: {identifier:'UserName', rules: [{type:'Empty', prompt:'user name cannot be empty'}]}, Userpass: {identifier: 'Userpass', rules: [{type:'Empty', prompt:'The user password cannot be empty'}]}}, {onsuccess:function() {alert ("it worked.");        }                }                ); }    </Script></Head><Body>    <formID= "Form1"runat= "Server">        <Divclass= "UI form segment">        <Divclass= "UI one column relaxed grid">            <Divclass= "column">                      <Divclass= "UI Fluid Form segment">          <H3class= "UI Header">Test System Login Screen</H3>          <Divclass= "Field">              <label>User name</label>              <inputtype= "text"name= "UserName"ID= "UserName"placeholder= "User name"/>          </Div>          <Divclass= "Field">              <label>Password</label>              <inputtype= "Password"name= "Userpass"ID= "Userpass"/>          </Div>          <Divclass= "UI Blue Submit Button"onclick= "Login ()">Login</Div>      </Div>            </Div>        </Div>            <Divclass= "UI error Message">            </Div>        </Div>    </form></Body></HTML>

For the field is written in the position of the field, the call for this event I also studied for a long time, I hope you encounter this problem when you can look at.

Semantic the use of events for validation controls in the UI

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.