मेरे पास स्क्रीन पर कुछ तत्व हैं जहां उपयोगकर्ता रिकॉर्ड की खोज कर सकते हैं। टेक्स्ट दर्ज करने के बाद और बटन पर क्लिक करने के बाद उन्हें खोज बटन के बगल में एक संदेश दिखाना चाहिए। मेरा कोड ठीक काम करता है लेकिन मेरा संदेश कूदता है और यह पूरी पंक्ति को प्रभावित करता है। संदेश दिखाने के बाद सभी तत्व नीचे जाते हैं और जब संदेश गायब हो जाता है तो सबकुछ सामान्य रूप से वापस चला जाता है। मैं सोच रहा हूं कि जब स्क्री पर संदेश दिखाता है तो मैं तत्वों को कूदने के लिए कैसे रोक सकता हूं? मैं div तत्वों का उपयोग करता हूं लेकिन वे तालिका पंक्तियों और कोशिकाओं के रूप में प्रदर्शित होते हैं। मैं इसका उपयोग करता हूं क्योंकि यह कोड फॉर्म के अंदर है और इस मामले में तालिका का उपयोग वैध HTML प्रारूप/संरचना नहीं है।संदेश प्रदर्शित होने पर पंक्ति कूदने से रोकें?
$('#searchBtn').on('click', function(){
\t $('#searchMsg').addClass("error").show().text('This field is required.').delay(4000).fadeOut('slow').queue(function(){
\t \t \t $(this).removeClass("error").dequeue();
\t \t \t });
});div.formTbl {
\t display: table;
\t width: 100%;
}
div.frRow {
\t display: table-row;
\t text-align: left;
}
div.frCell {
\t display: table-cell;
\t padding-top: 2px;
\t padding-bottom: 2px;
\t padding-left: 0px;
\t padding-right: 0px;
\t text-align: center;
}
span.info, .success, .warning, .error {
\t border: 1px solid;
\t margin: 5px;
\t padding:5px 10px 5px 40px;
\t background-repeat: no-repeat;
\t background-position: 10px center;
\t border-radius: 3px;
\t display: block;
}
span.error {
\t color: #D8000C;
\t background-color: #FFBABA;
\t background-image: url('../Images/error.png');
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="formTbl" style="width:650px;">
<div class="frRow">
<div class="frCell" style="width:85px;">
<select name="studMenu" id="studMenu">
<option value="1">Name</option>
<option value="3">DOB</option>
<option value="4">Gender</option>
<option value="5">Nationality</option>
</select>
</div>
<div class="frCell" style="width:175px;">
<input type="text" name="searchFld" id="searchFld" size="24" maxlength="24" value="" title="Maximum size of the field is 24 characters." placeholder="Example: John, Miller" />
</div>
<div class="frCell" style="width:80px;">
<input type="button" name="searchBtn" id="searchBtn" value="Search"/>
</div>
<div class="frCell">
<span id="searchMsg" style="display:none;"></span>
</div>
</div>
</div>कार्य उदाहरण: यहाँ मेरी कोड के उदाहरण है https://jsfiddle.net/dmilos89/xeLj00kg/
आप [प्रदर्शन] (https://www.html5rocks.com/en/tutorials/forms/constraintvalidation/) फ़ॉर्म त्रुटि (0) – MaxZoom