jQuery验证未捕获ReferenceError

Question

I have a form with multiple inputs and I want to validate the required ones.

container.all("input").each(function(){
if(this.hasAttribute("required")){
        if((this.val()==="") {
            undentifiedFunction()
        }
    }

(By mistake) undentifiedFunction() is not defined, and it valides the inputs as I wanted. How should I do it the right way?

Answer 1

You may want to take a step back for a second & see the overall picture of form validation. Asking for an easy code snippet here is going to cause problems for you, until you understand what it is that you really need to do first.

You're going to want to validate each input field & if it fails, then you'll want to highlight that input with a red border & optionally turn on a text message below the input explaining what's wrong. The idea is to be as user friendly as possible to an end-user who is not a programmer.

Users will need to know that credit card number fields can't contain letters. Or a zip code field can't be 3 characters long. Or a phone number field can't be 5 digits long. They may try to add those characters or accidentally do something wrong on a long form (think: airline reservation sites). So you could make a loooooong list of if/else-if/else or switch/case statements for all of your validation rules, but there is a better way of doing form validation.

What I recommend for client-side work is to build a JSON object of regular expressions, which check legitimate patterns of valid input field values. The RegEx strings will determine if the user's input is valid or invalid, based on the string rules. For invalids, you can flag the fields by adding an ".invalid" class name. You could also use jQuery to turn on any specific error messages. You'll still want to build server-side validation, but at least pre-built RegEx values are easy to find online & will help simplify your validation, so that you don't have to maintain giant conditional blocks of code (if/else-if/else & switch/case statements). It's easy to miss validation rules in conditional blocks, but the RegEx statements will catch them.

So, it may not matter what people think that the "right way" is. Everyone will have a different opinion. Whatever works for you & your site is the right way for you . It's better to think critically about what you're building, so that you learn the skills to build form validation more easily in the future.

Start by looking at this RegEx site's examples section: http://www.regular-expressions.info Or search the web for pre-built RegEx strings for email addresses, phone numbers, IP addresses, zip codes, state abbreviations, credit card number formats, etc... You can test them out with online tools like: http://regexr.com or offline tools like: RegEx Builder, which is over at: https://sourceforge.net/projects/regexbuilder/

Here is an example, which I built a few years ago: http://www.eonline.com/resources/js/libs/eol/eol.regEx.js

I'd build that differently today, but it has the .match() function + a starter JSON RegEx object. It showcases how complex form validation pattern matching is. Oh and you'll want to make sure to keep junk input values out of your database. Emails like: blah@blah.com or a state name like "XY" or a first name like "Darth" and last name like "Vader". Good luck!