खाली फ़ील्ड चेक करने के लिए Jquery फॉर्म सबमिट करें

Question

login.php लोड किए बिना सबमिट करते समय टेक्स्ट फ़ील्ड खाली होने पर यह जांचने के लिए jquery का उपयोग कैसे कर सकता हूं?

<form action="login.php" method="post"> 
    <label>Login Name:</label> 
    <input type="text" name="email" id="log" /> 
    <label>Password:</label> 
    <input type="password" name="password" id="pwd" /> 
    <input type="submit" name="submit" value="Login" /> 
</form> 

धन्यवाद।

Answer 1

आप ऐसा कर सकते हैं:

// Bind the event handler to the "submit" JavaScript event 
$('form').submit(function() { 

    // Get the Login Name value and trim it 
    var name = $.trim($('#log').val()); 

    // Check if empty of not 
    if (name === '') { 
     alert('Text-field is empty.'); 
     return false; 
    } 
}); 

FIDDLE DEMO

Answer 2

आप 'आवश्यक' http://jsbin.com/atefuq/1/edit

<form action="login.php" method="post"> 
    <label>Login Name:</label> 
    <input required type="text" name="email" id="log" /> 
    <label>Password:</label> 
    <input required type="password" name="password" id="pwd" /> 
    <input required type="submit" name="submit" value="Login" /> 
</form> 

Answer 3

का उपयोग आप jQuery मान्य प्लगइन के साथ प्रयास करना चाहिए कर सकते हैं:

$('form').validate({ 
    rules:{ 
     email:{ 
      required:true, 
      email:true 
     } 
    }, 
    messages:{ 
     email:{ 
      required:"Email is required", 
      email:"Please type a valid email" 
     } 
    } 
}) 

Answer 4

एक सरल समाधान की तरह इस

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

    var has_empty = false; 

    $(this).find('input[type!="hidden"]').each(function() { 

     if (! $(this).val()) { has_empty = true; return false; } 
    }); 

    if (has_empty) { return false; } 
}); 

नोट कुछ होगा: jQuery.on() विधि jQuery संस्करण 1.7+ में ही उपलब्ध है, लेकिन अब यह ईवेंट हैंडलर्स संलग्न की पसंदीदा तरीका है।

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

या, आप jQuery validate प्लगइन देख सकते हैं। यह यह और बहुत कुछ करता है।

एनबी: इस प्रकार की तकनीक हमेशा सर्वर साइड सत्यापन के संयोजन के साथ प्रयोग की जानी चाहिए।

Answer 5

आपको फॉर्म submit ईवेंट में हैंडलर जोड़ने की आवश्यकता है। हैंडलर में आपको प्रत्येक टेक्स्ट फ़ील्ड की जांच करने की आवश्यकता है, यदि तत्व खाली नहीं हैं तो तत्व और पासवर्ड फ़ील्ड का चयन करें।

$('form').submit(function() { 
    var res = true; 
    // here I am checking for textFields, password fields, and any 
    // drop down you may have in the form 
    $("input[type='text'],select,input[type='password']",this).each(function() { 
     if($(this).val().trim() == "") { 
      res = false; 
     } 
    }) 
    return res; // returning false will prevent the form from submitting. 
}); 

Answer 6

मुझे वास्तव में उन फॉर्मों से नफरत है जो मुझे नहीं बताते कि कौन से इनपुट/गायब हैं। तो मैं डोमिनिक के जवाब में सुधार करता हूं - इसके लिए धन्यवाद।

सीएसएस फ़ाइल में "सीमा रेखा" वर्ग को सीमा में लाल रंग सेट किया गया है।

$('#<form_id>').submit(function() { 
    var allIsOk = true; 

    // Check if empty of not 
    $(this).find('input[type!="hidden"]').each(function() { 
     if (! $(this).val()) { 
      $(this).addClass('borderR').focus(); 
      allIsOk = false; 
     } 
    }); 

    return allIsOk 
}); 

Answer 7

function isEmpty(val) { 
if(val.length ==0 || val.length ==null){ 
    return 'emptyForm'; 
}else{ 
    return 'not emptyForm'; 
} 

}

$(document).ready(function(){enter code here 
    $("form").submit(function(event) { 
     $('input').each(function(){ 
      var getInputVal = $(this).val(); 
      if(isEmpty(getInputVal) =='emptyForm'){ 
       alert(isEmpty(getInputVal)); 
      }else{ 
       alert(isEmpty(getInputVal)); 
      } 
     }); 
     event.preventDefault(); 
    }); 
}); 

Answer 8

var save_val = $("form").serializeArray(); 
$(save_val).each(function(index, element) { 
    alert(element.name); 
    alert(element.val); 
});