-1

Ich möchte überprüfen, ob mein Nachname Element Informationen mit einer "If" -Aussage enthält, aber ich weiß nicht wo ich es platzieren soll oder ob das falsch läuft. Der Zweck ist, schließlich zu prüfen, ob alle Felder gefüllt sind, bevor ich den Submit-Button drücken kann. Also, was ist der beste Weg, dies zu überprüfen?Überprüfen, ob das Feld im Formular Informationen enthält oder nicht

function check() { 
 
    let lastName = document.findElementById('last-name').value; 
 
    addressForm = document.shippingAddressForm; 
 

 

 
    addressForm.addEventListener('submit', (event) => { 
 
    event.preventDefault(); 
 

 
    }); 
 
    alert("Please enter all fields "); 
 

 
}

<head> 
 
    <meta charset="utf-8"> 
 
    <title>JavaScript</title> 
 
    <link href="style.css" rel="stylesheet"> 
 
    <script src="main.js" defer></script> 
 
</head> 
 

 
<body> 
 
    <form id="shipping-address-form" name="shippingAddressForm" action="#" method="post"> 
 
    <h1>Shipping Address</h1> 
 

 
    <div class="flex-container"> 
 
     <div> 
 
     <label for="first-name">First Name:</label> 
 
     <input type="text" id="first-name" name="firstName" /> 
 
     </div> 
 

 
     <div> 
 
     <label for="last-name">Last Name:</label> 
 
     <input type="text" id="last-name" name="lastName" /> 
 
     </div> 
 
    </div> 
 

 
    <div class="flex-container"> 
 
     <label for="address">Address:</label> 
 
     <input type="text" id="address" name="address" /> 
 
    </div> 
 

 
    <div class="flex-container"> 
 
     <div> 
 
     <label for="city">City:</label> 
 
     <input type="text" id="city" name="city" /> 
 
     </div> 
 

 
     <div> 
 
     <label for="state">State:</label> 
 
     <input type="state" id="state" name="state" /> 
 
     </div> 
 

 
     <div> 
 
     <label for="zip-code">Zip Code:</label> 
 
     <input type="text" id="zip-code" name="zipCode" /> 
 
     </div> 
 
    </div> 
 

 
    <div class="flex-container"> 
 
     <div> 
 
     <label for="phone-number">Phone Number:</label> 
 
     <input type="text" id="phone-number" name="phoneNumber" /> 
 
     </div> 
 

 
     <div> 
 
     <label for="email">Email:</label> 
 
     <input type="text" id="email" name="email" /> 
 
     </div> 
 
    </div> 
 

 
    <div class="button"> 
 
     <button type="submit">Submit</button> 
 
    </div> 
 
    </form> 
 
</body>

Quelle

2017-02-22 Tiago

Dieser Link https://www.w3schools.com/js/js_validation.asp helfen könnte –

Sie auch 'required' Attribut ausprobieren können: https: //www.w3schools .com/tags/att_input_required.asp –

Problem

Sie haben check() die Funktion nicht nennen. Du hast es nur definiert.

vorgeschlagene Lösung

Versuchen Sie, diese löschte ich den Inhalt der Funktion check(). In diesem Beispiel wird nur zeigt den Aufruf der Funktion (aber besser verwendet required Attribut in HTML https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input erforderlich ist auf der Hälfte der Seite)

function check() { 
 
    
 
    alert("Please enter all fields "); 
 

 
}

<head> 
 
    <meta charset="utf-8"> 
 
    <title>JavaScript</title> 
 
    <link href="style.css" rel="stylesheet"> 
 
    <script src="main.js" defer></script> 
 
</head> 
 

 
<body> 
 
    <form id="shipping-address-form" name="shippingAddressForm" action="#" method="post" onsubmit='check()'> 
 
    <h1>Shipping Address</h1> 
 

 
    <div class="flex-container"> 
 
     <div> 
 
     <label for="first-name">First Name:</label> 
 
     <input type="text" id="first-name" name="firstName" /> 
 
     </div> 
 

 
     <div> 
 
     <label for="last-name">Last Name:</label> 
 
     <input type="text" id="last-name" name="lastName" /> 
 
     </div> 
 
    </div> 
 

 
    <div class="flex-container"> 
 
     <label for="address">Address:</label> 
 
     <input type="text" id="address" name="address" /> 
 
    </div> 
 

 
    <div class="flex-container"> 
 
     <div> 
 
     <label for="city">City:</label> 
 
     <input type="text" id="city" name="city" /> 
 
     </div> 
 

 
     <div> 
 
     <label for="state">State:</label> 
 
     <input type="state" id="state" name="state" /> 
 
     </div> 
 

 
     <div> 
 
     <label for="zip-code">Zip Code:</label> 
 
     <input type="text" id="zip-code" name="zipCode" /> 
 
     </div> 
 
    </div> 
 

 
    <div class="flex-container"> 
 
     <div> 
 
     <label for="phone-number">Phone Number:</label> 
 
     <input type="text" id="phone-number" name="phoneNumber" /> 
 
     </div> 
 

 
     <div> 
 
     <label for="email">Email:</label> 
 
     <input type="text" id="email" name="email" /> 
 
     </div> 
 
    </div> 
 

 
    <div class="button"> 
 
     <button type="submit">Submit</button> 
 
    </div> 
 
    </form> 
 
</body>

und auch, wenn Sie mit FF

Anzeige Fehlermeldung möchten

Fehlermeldungen

Wenn Sie Firefox wollen eine benutzerdefinierte Fehlermeldung präsentieren, wenn ein Feld nicht zu bestätigen, können Sie das x-moz-Fehlernachricht-Attribut verwenden, dies zu tun:

<input type="email" 
x-moz-errormessage="Please specify a valid email address.">

Quelle

2017-02-22 00:58:52 Grisza

hier ist die alte Schule Lösung für das Problem:

Arbeits Geige: https://jsfiddle.net/almamun1996/k6n7ufou/19/

HTML:

<body> 
    <form id="shipping-address-form" name="shippingAddressForm" action="#" method="post"> 
     <h1>Shipping Address</h1> 

     <div class="flex-container"> 
      <div> 
      <label for="first-name">First Name:</label> 
      <input type="text" id="first-name" name="firstName" /> 
      </div> 

      <div> 
      <label for="last-name">Last Name:</label> 
      <input type="text" id="last-name" name="lastName" /> 
      </div> 
     </div> 

     <div class="flex-container"> 
      <label for="address">Address:</label> 
      <input type="text" id="address" name="address" /> 
     </div> 

     <div class="flex-container"> 
      <div> 
      <label for="city">City:</label> 
      <input type="text" id="city" name="city" /> 
      </div> 

      <div> 
      <label for="state">State:</label> 
      <input type="state" id="state" name="state" /> 
      </div> 

      <div> 
      <label for="zip-code">Zip Code:</label> 
      <input type="text" id="zip-code" name="zipCode" /> 
      </div> 
     </div> 

     <div class="flex-container"> 
      <div> 
      <label for="phone-number">Phone Number:</label> 
      <input type="text" id="phone-number" name="phoneNumber" /> 
      </div> 

      <div> 
      <label for="email">Email:</label> 
      <input type="text" id="email" name="email" /> 
      </div> 
     </div> 

     <div class="button"> 
      <input type="button" id="btnSubmit" onclick="check()" value="Submit"/> 
     </div> 
     </form> 
</body>

JS:

function check() { 
    if(document.getElementById('first-name').value == null || document.getElementById('first-name').value.trim() == ''){ 
    alert("Please enter first-name "); 
    document.getElementById("first-name").focus(); 
    return false; 
    } 
    if(document.getElementById('last-name').value == null || document.getElementById('last-name').value.trim() == ''){ 
    alert("Please enter last-name "); 
    document.getElementById("last-name").focus(); 
    return false; 
    } 
    if(document.getElementById('address').value == null || document.getElementById('address').value.trim() == ''){ 
    alert("Please enter address "); 
    document.getElementById("address").focus(); 
    return false; 
    } 
    if(document.getElementById('city').value == null || document.getElementById('city').value.trim() == ''){ 
    alert("Please enter city "); 
    document.getElementById("city").focus(); 
    return false; 
    } 
    if(document.getElementById('state').value == null || document.getElementById('state').value.trim() == ''){ 
    alert("Please enter state "); 
    document.getElementById("state").focus(); 
    return false; 
    } 
    if(document.getElementById('zip-code').value == null || document.getElementById('zip-code').value.trim() == ''){ 
    alert("Please enter zip-code "); 
    document.getElementById("zip-code").focus(); 
    return false; 
    } 
    if(document.getElementById('phone-number').value == null || document.getElementById('phone-number').value.trim() == ''){ 
    alert("Please enter phone-number "); 
    document.getElementById("phone-number").focus(); 
    return false; 
    } 
    if(document.getElementById('email').value == null || document.getElementById('email').value.trim() == ''){ 
    alert("Please enter email "); 
    document.getElementById("email").focus(); 
    return false; 
    } 
alert('Form validated'); 
}

Quelle

2017-02-22 04:30:53 Mamun

Überprüfen, ob das Feld im Formular Informationen enthält oder nicht

Antwort

Problem

vorgeschlagene Lösung

Verwandte Themen