जब मैं ऑनसमेट से झूठी वापसी करता हूं तो मेरा HTML फॉर्म अभी भी सबमिट क्यों करता है?

Question

मैंने लॉगिन फॉर्म को सत्यापित करने के लिए एक सरल स्क्रिप्ट लिखी है:

<script type="text/javascript"> 
    function validateLoginForm(){ 
    var idV = document.forms["LoginForm"]["id"].value; 
    var pwdV = document.forms["LoginForm"]["pwd"].value; 

    if (idV == null || idV == "" || idV.length < 5) { 
      alert("user ID must be filled and of more than 4 characters!!"); 
      id.focus(); 
      return false; 
    } 

    if (pwdV == null || pwdV == "" || pwdV.length < 5) { 
     alert("Password must be filled and of more than 4 characters!!"); 
     pwd.focus(); 
     return false; 
    } 

    return true; 
} 
</script> 

और इसे इस प्रकार कॉल करें:

<form name="LoginForm" method="POST" onsubmit="return validateLoginForm()" action="Login" > 
. 
. 
. 
. 
</form> 

समस्या यह है कि जावास्क्रिप्ट अलर्ट देता है क्योंकि मैं सही ढंग से सेट करता हूं लेकिन अंत में Login servlet स्वचालित रूप से भी बुलाया जाता है, जो एक गलत बात है..यह क्यों होता है? कोई भी समाधान?

Answer 1

पुनर्निर्देशन लॉगिन करने के लिए होता है क्योंकि आप js त्रुटि है।

आप चर id और psw को परिभाषित नहीं है।

तो जब आप id.focus() या psw.focus() कोशिश - आप js त्रुटि है और डिफ़ॉल्ट रूप से सच लौट

तो यह कोड जोड़ें:

var id = document.forms["LoginForm"]["id"]; 
var pwd = document.forms["LoginForm"]["pwd"]; 
var idV = document.forms["LoginForm"]["id"].value; 
var pwdV = document.forms["LoginForm"]["pwd"].value; 

Answer 2

इस प्रयास करें,

<script type="text/javascript"> 
    function validateLoginForm(){ 
    var idV = document.forms["LoginForm"]["id"].value; 
    var pwdV = document.forms["LoginForm"]["pwd"].value; 
    var err = ''; 
    if (idV == null || idV == "" || idV.length < 5) { 
      err = "user ID must be filled and of more than 4 characters!! \n"; 
      document.getElementById("id").focus() 
    } 

    if (pwdV == null || pwdV == "" || pwdV.length < 5) { 
     err = "Password must be filled and of more than 4 characters!! \n"; 
     document.getElementById("pwd").focus() 
    } 
    if(err == '') 
     return true; 
    else 
     { 
     alert(err); 
     return false; 
     } 
} 
</script> 

Answer 3

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

HTML में रूपों के साथ अपने व्यवहार, आप पैरामीटर नाम के लिए 'name =' का उपयोग करने के जब प्राप्त स्क्रिप्ट पर पारित किया जाना है। यह आपकी स्क्रिप्ट को देता है? Id = blah & pwd = blah बिट यूआरएल में या पोस्ट डेटा पेलोड के रूप में।

हालांकि ....

डोम (दस्तावेज़ ऑब्जेक्ट मॉडल) के रूप में आप अपनी स्क्रिप्ट में हैं का उपयोग कर अपने तक पहुँचने मूल्यों, तो आप तत्व कोई 'id =' विशेषता के साथ की पहचान करने की जरूरत है जब।

ही अपने दस्तावेज़ में कहीं भी किसी भी तत्व है कि आप js में एक पटकथा दृष्टिकोण का उपयोग कर का उपयोग करने की जरूरत है के लिए सही है।

यदि आप नोटिस करते हैं, तो आपको चेतावनी मिलती है, लेकिन साथ ही साथ झूठी वापसी नहीं होने पर, आपका फोकस कॉल भी कभी नहीं बुलाया जाता है, यह ऐसा होगा जिससे आपकी स्क्रिप्ट को 'आईडी' नामक तत्व के रूप में निरस्त कर दिया जा सके मिल गया।

आईडी = "आईडी" और आईडी = "आईडी" और नाम = "पीडब्ल्यूडी" अपने इनपुट टैग में "id" और name = "pwd" विशेषताओं को जोड़ें, और आपको यह पता होना चाहिए कि सभी उम्मीद के अनुसार काम करेंगे। ईजी:

<input type="text" name="id" id="id" ... /> 

एक आखिरी टिप्पणी पर, मैं तुम्हें फिर भी प्रोत्साहित करेगा, इस समारोह jQuery की तरह कुछ का उपयोग कर फिर से लिखने के लिए, आप मॉडल और अधिक सहज और क्रॉस प्लेटफॉर्म अनुकूल मिल जाएगा।

Answer 4

मैं यहाँ एक न्यूनतम परीक्षण का मामला बना लिया है: http://www.pauldwaite.co.uk/test-pages/7723381/

<script> 
function pretendValidation(){ 
    alert("Validatation failed!"); 
    return false; 
} 
</script> 

<form action="http://www.google.co.uk/" method="POST" onsubmit="return pretendValidation();"> 
    <input type="submit" value="Submit"> 
</form> 

जब मैं पर "भेजें" पर क्लिक करें, चेतावनी होता है, और प्रपत्र प्रस्तुत नहीं करता है। तो सिद्धांत में, आपका कोड काम करना चाहिए।

@Shawty mentioned के रूप में, आपको अपने फॉर्म HTML के साथ कोई समस्या हो सकती है। यदि आप सभी एचटीएमएल भी पोस्ट करते हैं, तो हम इसे देख सकते हैं।

Answer 5

सर्वश्रेष्ठ अभ्यास: मेरे प्रपत्र

<script type="text/javascript"> 


function validateLoginForm(){ 
    try{ 
    var idV = document.forms["LoginForm"]["id"].value; 
    var pwdV = document.forms["LoginForm"]["pwd"].value; 

    if (idV == null || idV == "" || idV.length < 5) { 
     alert("user ID must be filled and of more than 4 characters!!"); 
     id.focus(); 
     return false; 
    } 

    if (pwdV == null || pwdV == "" || pwdV.length < 5) { 
     alert("Password must be filled and of more than 4 characters!!"); 
     pwd.focus(); 
     return false; 
    } 
}catch(e){ 
    console.log(e); 
    return false; 
} 

return true; 
} 
</script> 

Answer 6

ठीक है, अजीब पर्याप्त: यदि आप नहीं गारंटी करने के लिए प्रपत्र प्रस्तुत करने के लिए, भले ही आपके जावास्क्रिप्ट एन अपवाद फेंकता चाहते हैं, तो आप अपने कोड ट्राई/कैच ब्लॉक में लपेट चाहिए अभी भी प्रस्तुत की गई थी जब मैं अपने function से false लौटे और फ़ॉर्म की onsubmit करने के लिए कि फ़ंक्शन द्वारा दिया गया लौट आए ... मैं भी कोशिश की:

onsubmit="return false;" 

सुनिश्चित नहीं हैं कि घटना ट्रिगर चलती चल रहा था ... किसी भी मामले मेंsubmit बटन के onclick ईवेंट ने समस्या को ठीक किया।

अद्यतन: खोजने कि कोड मैं संपादन किया गया था एक और जे एस हैंडलर onsubmit घटना है यही वजह है कि यह मेरे return false;