Tüm alanları bir defada HTML5 ile bir kerede doğrulayın

HTML5'in tüm alanları bir kerede değil aynı anda doğrulamasını sağlamanın bir yolu var mı?Tüm alanları bir defada HTML5 ile bir kerede doğrulayın

Birkaç satırlık JavaScript kullanmanız yeterlidir, ancak bunun için gerçekten bir modül kullanmak istemiyorum.

Biraz araştırdım ama bunun için temiz bir çözüm bulamadım.

<html> 
    <head> 
     <title>Validation Test</title> 
     <link href="css/style.css" rel="stylesheet"> 
    </head> 
    <body> 
     <form action="" id="myForm" method="post"> 
     <input id="name" name="name" required type="text"> 
     <input id="phone" name="phone" required type="text"> 
     <input type="submit" value="Submit"> 
     </form> 
    </body> 
</html>

Css dosyası:: post olası bir yinelenen bir alan için birden çok doğrulama koşullarına sahip içindir olarak, ben önerdi

input:focus:required:invalid { 
    border: 2px solid red !important; 
}

İşte

örnek şeklidir Tüm geçersiz alanları bir kerede doğrulamak/göstermek için. Form etiketi üzerinde

kaynak

2015-09-29 Mankind1023

olası yinelenen [HTML5 kullanarak birden fazla giriş doğrulaması nasıl?] (Http://stackoverflow.com/questions/14114267/how-to-make-multiple-input-validation-using-html5) – halfzebra

Teşekkürler, ancak bu yazı bir alan için birden çok doğrulama koşuluna sahip olmak içindir, tüm geçersiz alanları bir kerede doğrulamak/göstermek istiyorum. – Mankind1023

Sadece temel (boş alan yok) doğrulama mı yoksa daha karmaşık bir şey mi yapıyorsunuz? –

jQuery kullanmak istemiyorsanız, bu iyi. Bunu vanilla js olay işleyicileri ve DOM seçicileri ile kolayca yapabilirsiniz. Bana zaman tasarrufu için jQuery kullanıyorum.

$('#myForm').on('submit', function() { 
    var $inputs = $(this).find(':input'), 
     isValid = true; 

    $inputs.each(function() { 
    if ($(this).val() == '') { 
     isValid = false; 
     $(this).addClass('error-control'); 
    } else { 
     $(this).removeClass('error-control'); 
    } 
    }); 

    return isValid 
});

arasında

kaynak

2015-09-29 17:30:32

Bu aslında yaptığım şeyle güzel çalıştı, teşekkürler. – Mankind1023

Kullanım onSubmit:

Bkz: http://www.w3schools.com/js/js_validation.asp

<form action="" id="myForm" method="post" onsubmit="return validateForm()">

Js:

function validateForm() { 
    // validate form here 
    // return false if there are errors 
    // return true to submit the form 
}

kaynak

2015-09-29 17:25:41

Tüm alanları bir defada HTML5 ile bir kerede doğrulayın

cevap

İlgili konular