एक मल्टी-स्टेप फ़ॉर्म इंटरफ़ेस बनाएं

वेब डिज़ाइन में फॉर्म की उपयोगिता अविश्वसनीय रूप से महत्वपूर्ण विषय है यूज़र्स को प्रदान किए गए प्राथमिक इनपुट इंटरफेस के रूप में, किसी अच्छे यूजर अनुभव के लिए एक फॉर्म की उपयोगिता आवश्यक है।

आज, हम एक मल्टी-पार्ट फॉर्म बनाने जा रहे हैं, जो वेलिडेशन और एनीमेशन के साथ पूर्ण है। हम बहुत सारी जमीन को कवर करेंगे, इसलिए तैयार हो जाएं!

फॉर्म उच्च स्तरीय सर्वश्रेष्ठ अभ्यास

फॉर्म इंटरफ़ेस डिज़ाइन प्रयोज्यता बाधाओं का मीनफील्ड (minefiled) है। इससे पहले कि हम शुरू करें, चलो कुछ फार्म बेस्ट प्रैक्टिस के बारे में बात करते हैं।

अपने यूज़र्स को बहुत मुश्किल सोच में नहीं डालें

आम तौर पर अद्वितीय संपर्कों (unique interaction) को प्रोत्साहित करने के लिए फार्म नहीं होते हैं। अच्छे फॉर्म स्पष्ट नेविगेशन तकनीक और पूर्ण पारदर्शिता प्रदान करते हैं। अच्छे फॉर्म्स को अच्छी तरह लेबल और नेविगेट करना आसान है।

बहुत फैंसी मत करो

यह महत्वपूर्ण है कि डिफ़ॉल्ट फॉर्म बेहेवियर से बहुत दूर नहीं हटें। कुछ standards हैं जो की फॉर्म्स के डिफ़ॉल्ट बेहेवियर के लिए आधार हैं। इन स्टैंडर्ड्स से deviation का उपयोग पहुंच पर नकारात्मक प्रभाव डाल सकता है, इसलिए जब संभव हो तो उन डिफ़ॉल्ट स्टाइल्स को बनाए रखने पर विचार करें।

याद रखें, यूजर रहते नहीं हैं

आपके फॉर्म के यूजर को रहने की ज़रूरत नहीं है। वे रहने के लिए चुनते हैं। फ़ॉर्म भरना एक काम है, इसलिए इसे आसान बनाएं। (यदि संभव हो, तो इसे मज़े करो!) यूजर को भ्रमित न करें या मांग न करें; इसके बजाए, फॉर्म से पूछ रहे सवालों के आसपास एक संवाद स्थापित करें। विनम्र रहें।

मल्टी-सेक्शन तकनीकों का उपयोग कब किया जाए

Multi-section फॉर्म निश्चित रूप से एक अच्छी तकनीक हैं, कभी-कभी "फ़ॉर्म को विभाजित करने से पहले कितने इनपुट लेते हैं" के लिए कोई भी जवाब नहीं है। इसके बजाय, हमेशा विचार करें कि फ़ॉर्म को अलग-अलग हिस्सों में विभाजित करना मदद करेगा या बाधित करेगा। दूसरे, विचार करें कि क्या यह इंटरेक्शन डिज़ाइन के अन्य पहलुओं की मदद करता है या बाधित करता है।

यदि आपके पास बहुत अलग सेक्शंस के साथ फॉर्म हैं, तो यह कई भागों में अलग करना सार्थक हो सकता है। चेकआउट प्रक्रिया इस का एक सामान्य उदाहरण है (व्यक्तिगत जानकारी, शिपिंग जानकारी, भुगतान की जानकारी, और कन्फर्मेशन बहुत अलग और आम तौर पर पर्याप्त वर्ग हैं।)

इंटरेक्शन की प्लानिंग

हम arbitrary फ़ील्ड्स के साथ एक signup फार्म बनाने जा रहे हैं। हमें यह जानने की जरूरत है कि हम वर्तमान में किस सेक्शन में हैं, इसलिए हमें फ़ॉर्म के शीर्ष पर एक इंडिकेटर की आवश्यकता होगी। हम अपने फार्म सेक्शंस को हॉरिजॉन्टल करना चाहते हैं, दाएं से बाएं ओर स्लाइडिंग करते हुए। इसे पूरा करने के लिए, हम एक सेक्शन "window" एलिमेंट के अंदर पूर्ण स्थिति रखने के लिए विभिन्न सेक्शन सेट कर देंगे। हम भी दो बटन चाहते हैं; एक सामान्य सबमिट बटन है दूसरा एक "next section" बटन है।

मार्कअप

यहां हमारा फ़ॉर्म है:

1

<form id="signup" action="somewhere" method="POST">

2

    <ul id="section-tabs">

3

      <li class="current active"><span>1.</span> Creds</li>

4

      <li><span>2.</span> Deets</li>

5

      <li><span>3.</span> Settings</li>

6

      <li><span>4.</span> Last Words</li>

7

    </ul>

8

  <div id="fieldsets">

9

  <fieldset class="current">

10

    <label for="email">Email:</label>

11

    <input name="email" type="email" class="required email" />

12

    <label name="password" for="password">Password:</label>

13

    <input type="password" minlength="10" class="required">

14

  </fieldset>

15

  <fieldset class="next">

16

    <label for="username">Username:</label>

17

    <input name="username" type="text">

18

    <label for="bio">Short Bio:</label>

19

    <textarea name="bio" class="required"></textarea>

20

  </fieldset>

21

  <fieldset class="next">

22

    <label for="interests">Basic Interests:</label>

23

    <textarea name="bio"></textarea>

24

    <p>Receive newsletter?<br>

25

      <input type="radio" name="newsletter" value="yes"><label for="newsletter">yes</label>

26

      <input type="radio" name="newsletter" value="no"><label for="newsletter">no</label>

27

    </p>

28

  </fieldset>

29

  <fieldset class="next">

30

    <label for="referrer">Referred by:</label>

31

    <input type="text" name="referrer">

32

    <label for="phone">Daytime Phone:</label>

33

    <input type="tel" name="phone">

34

  </fieldset>

35

  <a class="btn" id="next">Next Section ▷</a>

36

  <input type="submit" class="btn">

37

  </div>

38

</form>

मार्कअप काफी सरल है, लेकिन इसके कुछ टुकड़ों के बारे में बात करते हैं।

• Fieldsets: inputs के समूह के लिए fieldset एक सिमेंटिक एलिमेंट हैं; यह पूरी तरह से हमारी स्थिति में सूट करता है।
• Classnames: jQuery Validate बिल्ट-इन टाइप को डिफाइन करने के लिए क्लासेज का प्रयोग करता है। हम एक मिनट में देखेंगे कि यह कैसे काम करता है।
• फील्ड आरबिटरेरी हैं। हमने आसान formatting के लिए पैराग्राफ टैग में रेडियो इनपुट को लपेट लिया है।
• सबमिट और next बटन: बटन की एक क्लास के साथ एंकर टैग का उपयोग अगले सेक्शन पर जाने के लिए किया जाएगा। सबमिट इनपुट जब जावास्क्रिप्ट के माध्यम से उचित होगा दिखाया जायेगा।

स्टाइल्स (कम-स्वाद वाले)

यह लंबा है, तैयार हो जाओ..

1

@import url(http://fonts.googleapis.com/css?family=Merriweather+Sans:300);

2

@import url(http://fonts.googleapis.com/css?family=Merriweather+Sans:700);

3

4

5

body {

6

  background: url(http://farm5.staticflickr.com/4139/4825532997\_7a7cd3d640\_b.jpg);

7

  background-size: cover;

8

  height: 100%;

9

  font-family: 'Merriweather Sans', sans-serif;

10

  color: #666;

11

}

12

13

#signup {

14

  width: 600px;

15

  height: auto;

16

  padding: 20px;

17

  background: #fff;

18

  margin: 80px auto;

19

  position: relative;

20

  min-height: 300px;

21

}

22

#fieldsets {

23

  position: absolute;

24

  top: 0px;

25

  left: 0px;

26

  width: 100%;

27

  height: 100%;

28

  padding: 20px;

29

  box-sizing: border-box;

30

  overflow: hidden;

31

}

32

input[type=text],

33

input[type=email],

34

input[type=password],

35

input[type=tel],

36

textarea {

37

  display: block;

38

  -webkit-appearance: none;

39

  -moz-appearance: none;

40

  width: 100%;

41

  box-sizing: border-box;

42

  border: 1px solid #ddd;

43

  padding: 8px;

44

  margin-bottom: 8px;

45

  position: relative;

46

  &:focus {

47

    outline: none;

48

    border: 1px solid darken(#2cbab2,10%);

49

  }

50

}

51

52

input[type=radio]{

53

  margin: 6px;

54

  display: inline-block;

55

}

56

fieldset {

57

  border: none;

58

  position: absolute;

59

  left: -640px;

60

  width: 600px;

61

  padding: 10px 0;

62

  transition: all 0.3s linear;

63

  -webkit-transition: all 0.3s linear;

64

  -moz-transition: all 0.3s linear;

65

  -ms-transition: all 0.3s linear;

66

  opacity: 0;

67

  &.current {

68

    left: 20px;

69

    opacity: 1;

70

  }

71

  &.next {

72

    left: 640px;

73

  }

74

}

75

input[type=submit] {

76

  display: none;

77

  border: none;

78

}

79

#section-tabs {

80

  font-size: 0.8em;

81

  height: 50px;

82

  position: relative;

83

  margin-top: -50px;

84

  margin-bottom: 50px;

85

  padding: 0;

86

  font-weight: bold;

87

  list-style: none;

88

  text-transform: uppercase;

89

  li {

90

    color: #a7a7a7;

91

    span {

92

      color: #bababa;

93

    }

94

    cursor: not-allowed;

95

    &.active {

96

      color: #444;

97

      cursor: pointer;

98

    }

99

    border-left: 1px solid #aaa;

100

    text-decoration: none;

101

    padding: 0 6px;

102

    float: left;

103

    width: 25%;

104

    box-sizing: border-box;

105

    text-align: center;

106

    font-weight: bold;

107

    line-height: 30px;

108

    background: #ddd;

109

    position: relative;

110

    &:after {

111

      content: "";

112

      display: block;

113

      margin-left: 0;

114

      position: absolute;

115

      left: 0;

116

      top: 0;

117

    }

118

    &.current {

119

      opacity: 1;

120

      background: #fff;

121

      z-index: 999;

122

      border-left: none;

123

      &:after {

124

        border: 15px solid transparent;

125

        border-left: 15px solid #2cbab2;

126

      }

127

    }

128

  }

129

}

130

.error {

131

  color: #bf2424;

132

  display: block;

133

}

134

input.error, textarea.error {

135

  border-color: #bf2424;

136

  &:focus {

137

    border-color: #bf2424;

138

  }

139

}

140

label.error {

141

    margin-bottom: 20px;

142

}

143

input.valid {

144

  color: green;

145

}

146

label.valid {

147

  position: absolute;

148

  right: 20px;

149

}

150

input+.valid, textarea+.valid {

151

  display: none;

152

}

153

.valid+.valid {

154

  display: inline;

155

  position: absolute;

156

  right: 10px;

157

  margin-top: -36px;

158

  color: green;

159

}

160

161

.btn {

162

  border: none;

163

  padding: 8px;

164

  background: #2cbab2;

165

  cursor: pointer;

166

  transition: all 0.3s;

167

  -webkit-transition: all 0.3s;

168

  -moz-transition: all 0.3s;

169

  &:hover {

170

     background: darken(#2cbab2, 6%);

171

  }

172

  color: #fff;

173

  position: absolute;

174

  bottom: 20px;

175

  right: 20px;

176

  font-family: 'Merriweather Sans', sans-serif;

177

}

चलो स्टाइल्स के महत्वपूर्ण हिस्से के माध्यम से चलते हैं।

अवलोकन

यह फॉर्म एक विशिष्ट चौड़ाई पर सेट है, जो margin:0 auto के साथ केंद्रित है: फिर position:relative सेट है। इस पोजिशनिंग चाइल्ड एलिमेंट्स को absolutely place करने के लिए absolute positioning allow करती है, containing form के relation में। containing फ़ॉर्म में तीन प्राथमिक प्रकार के एलिमेंट्स होते हैं: सेक्शन टैब और fieldset "window", साथ ही साथ बटन।

सेक्शन टैब containing एलिमेंट के relative रखा जाता है, और एक नकारात्मक टॉप मार्जिन के साथ "pulled" होता है। हम एक समान मार्जिन बॉटम के साथ बाकी लेआउट पर प्रभाव के लिए कम्पेन्सेट करते हैं।

fieldset "window" को positioned absolute सेट किया जाता है, जो कि पैरेंट फॉर्म एलिमेंट के relative है। चौड़ाई और ऊंचाई दोनों 100% पर सेट हैं इस window का उद्देश्य एलिमेंट्स को होल्ड करना है, फिर उन्हें छिपाने के लिए जब वे किनारों के बाहर गिरते हैं overflow: hidden के साथ। हम इसे फ़ॉर्म पर नहीं कर सकते, क्योंकि हमें इंडिकेटर टैब को बनाए रखना हैं।

अंत में, बटन एलिमेंट (एक एंकर टैग और सबमिट इनपुट) को फ़ॉर्म के निचले दाएं कोने पर absolute positioned कर दिया जाता है, नीचे और दाएं से 20 पिक्सल ऑफसेट करते हुए। हमने हॉवर पर बैकग्राउंड को गहरा करने के लिए बटन एलिमेंट में एक सरल CSS transition भी जोड़ा है।

कुछ और नोट्स

• फ़ील्डसेट्स position: absolute के रूप में सेट हैं: हमारे पास दो क्लासेज हैं दो स्टेट के लिए और डिफ़ॉल्ट स्टेट के लिए। डिफ़ॉल्ट स्टेट फ़ील्ड्सेट को बाईं तरफ खींचती है; .current क्लास फ़ील्ड्सेट को विज़िबल एरिया में ले जाती है, और अंत में .next क्लास फ़ील्ड्सेट को फॉर्म के दायीं ओर ले जाती है।
• वर्तमान क्लास में 1 की एक opacity है; डिफ़ॉल्ट (और स्वाभाविक रूप से .next) में 0 की opacity है
• हम साधारण css ट्रांजीशन के साथ इन क्लासेज के बीच fieldsets को एनिमेट करते हैं।
• .error और.valid क्लासेज वेलिडेशन स्टाइल के साथ मदद करेंगे। हम गूगल वैबफोंट्स के माध्यम से उपयोग के लिए मुफ़्त रूप से उपलब्ध फ़ॉन्ट, Merriweather Sans का उपयोग कर रहे हैं।

जावास्क्रिप्ट

यहाँ वह हिस्सा है जो सभी इंटरेक्शन का काम करता है। कोड को देखने से पहले कुछ नोट्स: यह कोड jQuery और jQuery Validate पर निर्भर करता है। JQuery validate एक प्लगइन है जो बहुत लंबे समय से रहा है, और इसलिए हजारों लोगों द्वारा इसका परीक्षण और सिद्ध किया गया है।

हमारी मूलभूत रणनीति: फॉर्म के लिए कुछ वेलिडेशन नियम सेट करें, जिसमे टेलीफ़ोन नंबर की जांच करने के लिए कस्टम फ़ंक्शन शामिल है। हम चाहते हैं कि यूजर पहले समाप्त सेक्शंस के माध्यम से वापस नेविगेट करने में सक्षम हो। हम चाहते हैं कि वे अगले सेक्शन में जाने के लिए एन्टर बटन का इस्तेमाल कर सकें; हालांकि, हम यूज़र्स को उससे अगले सेक्शन तक आगे बढ़ने की अनुमति नहीं देना चाहते हैं जब तक कि पिछले सेक्शन पुरे नहीं हो जाते और वैलिड नहीं हो जाते।

यदि यूजर किसी टैब पर जो कम्पलीट किये टैब्स से आगे हैं क्लिक करने की कोशिश करता है, तो हम उस section से नेविगेट अवॉयड करना चाहते हैं।

हम स्टेट्स के बीच ट्रांजीशन के लिए क्लासेज (jQuery एनिमेशन के बजाय) पर भरोसा करना चाहते हैं।

तो, इन बातों को ध्यान में रखते हुए, यहां अंतिम जावास्क्रिप्ट है। (ध्यान दें: यदि आप अपने jQuery पर नहीं हैं, तो यह थोड़ा मुश्किल हो सकता है, हालांकि, इसके साथ किसी भी तरह से रहें, और आप कोड में डाइविंग से सीख लेंगे।) पूरी स्क्रिप्ट के बाद, हम एक समय में इसमें से एक टुकड़ा लेंगे और समझायेंगे कि क्या हो रहा है।

1

$("#signup").validate({

2

  success : function(label){

3

    label.addClass("valid").text("✓");

4

  },

5

  error : function(e){

6

  // do nothing, but register this function

7

  },

8

  onsubmit:false,

9

  rules: {

10

    phone: {

11

      required: true,

12

      phoneUS: true

13

    }

14

  }

15

});

16

17

$("body").on("keyup", "form", function(e){

18

  if (e.which == 13){

19

    if ($("#next").is(":visible") && $("fieldset.current").find("input, textarea").valid() ){

20

      e.preventDefault();

21

      nextSection();

22

      return false;

23

    }

24

  }

25

});

26

27

28

$("#next").on("click", function(e){

29

  console.log(e.target);

30

  nextSection();

31

});

32

33

$("form").on("submit", function(e){

34

  if ($("#next").is(":visible") || $("fieldset.current").index() < 3){

35

    e.preventDefault();

36

  }

37

});

38

39

function goToSection(i){

40

  $("fieldset:gt("+i+")").removeClass("current").addClass("next");

41

  $("fieldset:lt("+i+")").removeClass("current");

42

  $("li").eq(i).addClass("current").siblings().removeClass("current");

43

  setTimeout(function(){

44

    $("fieldset").eq(i).removeClass("next").addClass("current active");

45

      if ($("fieldset.current").index() == 3){

46

        $("#next").hide();

47

        $("input[type=submit]").show();

48

      } else {

49

        $("#next").show();

50

        $("input[type=submit]").hide();

51

      }

52

  }, 80);

53

54

}

55

56

function nextSection(){

57

  var i = $("fieldset.current").index();

58

  if (i < 3){

59

    $("li").eq(i+1).addClass("active");

60

    goToSection(i+1);

61

  }

62

}

63

64

$("li").on("click", function(e){

65

  var i = $(this).index();

66

  if ($(this).hasClass("active")){

67

    goToSection(i);

68

  } else {

69

    alert("Please complete previous sections first.");

70

  }

71

});

72

73

74

jQuery.validator.addMethod("phoneUS", function(phone_number, element) {

75

    phone_number = phone_number.replace(/\s+/g, ""); 

76

  return this.optional(element) || phone_number.length > 9 &&

77

    phone_number.match(/^(1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/);

78

}, "Please specify a valid phone number");

तो, चलो एक एक टुकड़े पर चलते हैं।

1

$("#signup").validate({

2

  success : function(label){

3

    label.addClass("valid").text("✓");

4

  },

5

  error : function(e){

6

  // do nothing, but register this function

7

  },

8

  onsubmit:false,

9

  rules: {

10

    phone: {

11

      required: true,

12

      phoneUS: true

13

    }

14

  }

15

});

यह फ़ंक्शन, jQuery Validate के लिए सेटअप फ़ंक्शन है। सबसे पहले, हम प्लगइन को कह रहे हैं साइनअप फॉर्म लें और इसके लिए वेलिडेशन लागू करें। यदि वेलिडेशन सफल हो जाता है, तो हम उस लेबल के लिए valid नाम की एक क्लास जोड़ते हैं जो इनपुट एलिमेंट के बाद वेलिडेशन प्लगइन जोड़ता होता है, और utf-8 चेकमार्क ✓ के साथ टेक्स्ट को बदलता है।

हम error कॉलबैक भी दर्ज कर रहे हैं, हालांकि हम वास्तव में इस फंक्शन में कुछ नहीं कर रहे हैं। फ़ंक्शन को रजिस्टर ना करने में ऐसा लगता है की एरर होने पर succes function कालबैक हो। हम onsubmit हुक को false सेट कर रहे हैं; ऐसा इसलिए है क्योंकि एंटर दबाने से फ़ॉर्म को आटोमेटिक रूप से सबमिट किया जाता है, जो डिफ़ॉल्ट रूप से इनवैलिड फ़ॉर्म सबमिशन को रोकने के लिए वेलिडेशन चलाता है। फ़ॉर्म के डिफ़ॉल्ट बिहेवियर को रोकना फॉर्म वेलिडेशन को रोकता नहीं है। नतीजा यह है कि "next" स्क्रीन पर फ़ील्ड पहले कभी भी सबमिट नहीं किए जाने के बावजूद वेलिडेशन errors दिखाती है।

1

$("body").on("keyup", "form", function(e){

2

  if (e.which == 13){

3

    if ($("#next").is(":visible") && $("fieldset.current").find("input, textarea").valid() ){

4

      e.preventDefault();

5

      nextSection();

6

    }

7

  }

8

});

यह फ़ंक्शन keyup इवेंट के लिए सुनता है, फॉर्म पर ट्रिगर होने वाले। अगर हिट दर्ज की गई key एंटर हो (key कोड 13), तो हम निम्नलिखित जांच करते हैं। यदि next बटन अभी भी दिखाई दे रहा है और वर्तमान सेक्शन वैलिड है, तो फॉर्म सबमिट करते समय एंटर key के डिफ़ॉल्ट बिहेवियर को रोकें, जो फॉर्म सबमिशन है।

इसके बाद हम nextSection() कॉल करें, जो कि अगले सेक्शन में फ़ॉर्म को अग्रिम करता है। यदि वर्तमान सेक्शन में कोई भी इनवैलिड इनपुट्स है, तो उन इनपुट की पहचान की जाती है और फ़ॉर्म अग्रिम नहीं होता है यदि अगला बटन दिखाई नहीं दे रहा है, तो इसका मतलब है कि हम अंतिम सेक्शन पर हैं (जो हम इसके बाद के फ़ंक्शन में देखेंगे) और हम डिफ़ॉल्ट बिहेवियर (फ़ॉर्म सबमिशन) होने की अनुमति देना चाहते हैं।

1

$("#next").on("click", function(e){

2

  nextSection();

3

});

4

5

$("form").on("submit", function(e){

6

  if ($("#next").is(":visible") || $("fieldset.current").index() < 3){

7

    e.preventDefault();

8

  }

9

});

ये फंक्शन्स सरल हैं। यदि आप "next" id वाले बटन को दबाते हैं, तो हम अगले सेक्शन में आगे बढ़ना चाहते हैं। याद रखें nextSection() फ़ंक्शन फॉर्म वेलिडेशन के लिए सभी आवश्यक जांच करता है।

फ़ॉर्म की सबमिट इवेंट पर, हम फ़ॉर्म सबमिशन से बचना चाहते हैं यदि नेक्स्ट बटन दिखाई देता हैं या यदि मौजूदा फ़ील्ड्सेट अंतिम नहीं है।

1

function goToSection(i){

2

  $("fieldset:gt("+i+")").removeClass("current").addClass("next");

3

  $("fieldset:lt("+i+")").removeClass("current");

4

  $("li").eq(i).addClass("current").siblings().removeClass("current");

5

  setTimeout(function(){

6

    $("fieldset").eq(i).removeClass("next").addClass("current active");

7

      if ($("fieldset.current").index() == 3){

8

        $("#next").hide();

9

        $("input[type=submit]").show();

10

      } else {

11

        $("#next").show();

12

        $("input[type=submit]").hide();

13

      }

14

  }, 80);

15

16

}

GoToSection() फ़ंक्शन इस फॉर्म के नेविगेशन के पीछे का कार्यक्षेत्र है। यह सिंगल आर्गुमेंट लेता है - टारगेट नेविगेशन का इंडेक्स। फ़ंक्शन इंडेक्स पैरामीटर से पारित होने वाले इंडेक्स के साथ सभी फ़ील्ड्सेट को लेता है और current क्लास को निकालता है, और next क्लास जोड़ता है। यह फॉर्म के दायीं ओर एलिमेंट को धक्का देता है

अगला, हम पास किए गए इंडेक्स से काम इंडेक्स वाले सभी फील्डसेटस के मौजूदा current क्लास को निकाल देते हैं। इसके बाद, हम लिस्ट आइटम में passed इंडेक्स  के बराबर को चुनते हैं और current क्लास जोड़ते हैं।

इसके बाद हम अन्य सभी सिबलिंग lis में से current क्लास हटा देतें हैं। हम एक timeout सेट करते हैं, जिसके बाद हम next क्लास को निकालते हैं और current और active क्लास फ़ील्ड में इंडेक्स पैरामीटर के पास के सूचकांक के बराबर जोड़ देते हैं।

active क्लास हमें यह बताता है कि यूजर फिर से इस विशेष सेक्शन पर नेविगेट कर सकता है। यदि index पैरामीटर में पारित 3 है (अंतिम फ़ील्ड्सेट), तो हम next बटन को छिपा देते हैं और सबमिट बटन दिखाते हैं। अन्यथा, हम यह सुनिश्चित करना चाहते हैं कि next बटन दिखाई देगा और सबमिट बटन छुपा हुआ है। यह हमें सबमिट बटन छिपाने के लिए अनुमति देता है जब तक कि अंतिम फ़ील्ड्सेट दिखाई न दे।

1

function nextSection(){

2

  var i = $("fieldset.current").index();

3

  if (i < 3){

4

    $("li").eq(i+1).addClass("active");

5

    goToSection(i+1);

6

  }

7

}

8

9

$("li").on("click", function(e){

10

  var i = $(this).index();

11

  if ($(this).hasClass("active")){

12

    goToSection(i);

13

  } else {

14

    alert("Please complete previous sections first.");

15

  }

16

});

NextSection() फ़ंक्शन मूलतः goToSection() फ़ंक्शन के आस-पास एक wrapper है। जब nextSection कॉल किया जाता है, तो एक साधारण जांच यह सुनिश्चित करने के लिए की जाती है कि हम अंतिम सेक्शन पर नहीं हैं। जब तक हम नहीं हैं, तब तक हम उस सेक्शन में जाते हैं जो एक current इंडेक्स के बराबर है, और एक जोड़कर।

हम लिस्ट आइटम पर क्लिक ईवेंट को सुन रहे हैं। यह फ़ंक्शन यह सुनिश्चित करता है कि लिस्ट आइटम में active क्लास है, जो यूजर को प्रारंभ में सभी पिछले सेक्शंस को पूरा करके उस फॉर्म के उस सेक्शन पर पहुंचने के बाद प्राप्त होता है। यदि लिस्ट आइटम में क्लास होती है, तो हम goToSection को कॉल करते हैं और उस लिस्ट आइटम के इंडेक्स में पास करते हैं। यदि यूजर किसी सेक्शन से संबंधित लिस्ट आइटम पर क्लिक करता है, जहाँ वे अभी तक पहुंच नहीं सकते हैं, ब्राउज़र उन्हें सूचित करने के लिए चेतावनी देता है कि आगे बढ़ने से पहले उन्हें पिछले सेक्शंस को पूरा करना होगा।

1

jQuery.validator.addMethod("phoneUS", function(phone_number, element) {

2

    phone_number = phone_number.replace(/\s+/g, ""); 

3

  return this.optional(element) || phone_number.length > 9 &&

4

    phone_number.match(/^(1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/);

5

}, "Please specify a valid phone number");

अंत में, हम jQuery Validate प्लगइन द्वारा निर्धारित मेथड जोड़ रहे हैं जो मैन्युअल रूप से एक इनपुट की जांच करता है। हम इस पर ज्यादा वक्त नहीं बिताएंगे, क्योंकि यह सटीक कार्यक्षमता Validate Documentation में पाई जा सकती है।

मूलतः, हम यह सुनिश्चित करने के लिए जांच करते हैं कि यूजर को फ़ोन फ़ील्ड में रखे जाने वाले टेक्स्ट को regex (नंबर्स और सिम्बल्स की लंबी स्ट्रिंग) से मेल खाती है। यदि ऐसा होता है, तो इनपुट मान्य है। अगर ऐसा नहीं होता है, तो इनपुट के बाद संदेश "Please specify a valid phone number" जोड़ा गया है। आप किसी भी प्रकार के इनपुट (इसे एक regex का उपयोग करने की जरूरत नहीं है) के लिए जांच करने के लिए इस एक ही फंक्शनलिटी का उपयोग कर सकते हैं।

नोट: इसे पासवर्ड ऑथेंटिकेशन मेथड के रूप में उपयोग न करें। यह बहुत असुरक्षित है और कोई भी सोर्स को पासवर्ड देखने के लिए देख सकता है।

निष्कर्ष

हमने एक ठोस फॉर्म इंटरैक्शन बनाने के लिए कुछ न्यूनतम जावास्क्रिप्ट के साथ सिमेंटिक HTML और सरल LESS इस्तेमाल किया है। इस फॉर्म का निर्माण करने के लिए इस्तेमाल किए जाने वाले तरीके, विशेष रूप से स्टेट पहचानने के लिए classnames का इस्तेमाल करते हैं और फ़ंक्शनैलिटी और एनिमेशन को परिभाषित करने के लिए लगभग किसी भी इंटरैक्टिव प्रोजेक्ट में उपयोग किया जा सकता है। समान फ़ंक्शनैलिटी का इस्तेमाल प्रदर्शन स्टेप - खेल, और जो कुछ भी सरल स्टेट-बेस्ड इंटरैक्शन पर निर्भर करता है, के लिए किया जा सकता है।

इस फॉर्म में आप और क्या करेंगे? यूज़र्स को और अधिक स्वाभाविक रूप से एक थकाऊ प्रक्रिया जैसे एक लंबी बहु-चरण फॉर्म में भरने के माध्यम से किस प्रकार इंटरेक्शन करने के लिए मिलते हैं? उन्हें कमेंट में साझा करें!