All geek questions in one place

HTML form field - how to require input format

I need the phone numbers (XXX) XXX-XXXX to be entered in my HTML form and the SS numbers to be entered as XXX-XX-XXXX. This is it.

The only reason I do this is because the results of the form submission are consistent and easily exported to Excel.

I was told to use Javascript to do this, but maybe I'm not advanced enough to understand all the steps in this.

Can someone point me in the right direction, bearing in mind that I'm a newbie?

Wow, thanks Ethan and @ suman-rich! I ALMOST NOW! An error message now appears in the field to use the correct format 555-55-5555. Great. But no matter what I enter, enter the popup in this field is saved. I tried 555-55-5555 as well as 555555555 and none of them are accepted. Here is the HTML for this field:

<label>
            Social Security Number:
            <input id="ssn" required pattern="^d{3}-d{2}-d{4}$"
                title="Expected pattern is ###-##-####" />
        </label>
</div>
    <script>$('form').on('submit', function(){
        $(this).find('input[name="SocialSecurity"]').each(function(){
        $(this).val() = $(this).val().replace(/-/g, '');
    });
    $(this).find('input[name="ssn"]').each(function(){
        $(this).val() = $(this).val().replace(/-/g, '');
    });
});</script>
    <br />
+4
source share
4 answers

The easiest way to do this is to simply use a few fields:

<div>
    Phone:
   (<input type="text" name="phone-1" maxlength="3">)
   <input type="text" name="phone-2" maxlength="3">-
   <input type="text" name="phone-3" maxlength="4">
</div>
<div>
    SSN:
    <input type="text" name="ssn-1">-
    <input type="text" name="ssn-2">-
    <input type="text" name="ssn-3">
</div>

Although this approach is, of course, simple, it is not great. The user must click a tab or click on each field to enter data, and there is nothing (except common sense) that prevents them from entering things other than numbers.

, , , , . , , , , . , "5555551212" "(555) 555-1212", "5555551212".

, HTML5 ( SSN). , , , .

, :

<div>
    <label for="fieldPhone">Phone: </label>
    <input type="tel" id="fieldPhone" placeholder="(555) 555-1212">
</div>
<div>
    <label for="fieldSsn">SSN: </label>
    <input type="text" id="fieldSsn" name="ssn" placeholder="555-55-5555" pattern="\d{3}-?\d{2}-?\d{4}">
</div>

, . , polyfill. HTMl5:

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills#wiki-web-forms

, , , - .

; , , , , , . , . , jQuery:

$('form').on('submit', function(){
    $(this).find('input[type="tel"]').each(function(){
        $(this).val() = $(this).val().replace(/[\s().+-]/g, '');
    });
    $(this).find('input[name="ssn"]').each(function(){
        $(this).val() = $(this).val().replace(/-/g, '');
    });
});

: , , , , .

- AJAX .serialize; , . , , , .

, . HTML5 , , . , "+1 (555) 555-1212", 8 7. 7 , :

/^\(?\d{3}\)?[.\s-]?\d{3}[.\s-]\d{4}$/

(, , , ) - 7- .

jsfiddle HTML5:

http://jsfiddle.net/Cj7UG/1/

, !

+10

, , .

//for (XXX)-XXX-XXXX
var pattern =  /^\(\d{3}\)\-\d{3}\-\d{4}$/; 

//for XXX-XXX-XXXX
var pattern2 = /^\d{3}\-\d{3}\-\d{4}$/;

DEMO

0

Here is a complete solution using the jquery and jquery validation mechanism: regex pattern, which would handle both cases:

^ (\ d {3} - | (\ d {3}) \ c) \ d {2} - \ d {4} $

HTML:

<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"></script>
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js" type="text/javascript"></script>
<link href="http://jquerytools.org/media/css/validator/form.css" type="text/css" rel="stylesheet">
<script>
$(function() {
    $("#myform").validator();
});
</script>
</head>
<body>
<form id="myform">
    <input type="text" name="name" pattern="^(\d{3}-|\(\d{3}\)\s)\d{2}-\d{4}$" maxlength="30" />
    <br>
    <input type="submit" name="submit" value="submit" />
</form>
</body>

Click here for a demo on jsfiddle

0
source

use can use sth like this:

<html>
<head>
</head>
<body>
<input type="text" id="ok">
<script>
document.getElementById("ok").onkeypress = function(e){
    var keycodes = new Array(0,48,49,50,51,52,53,54,55,56,57);
    var was = false;
    for(x in keycodes){
        if(keycodes[x] == e.charCode){
            was = true;
            break;
        }
        else{
            was = false;
        };
    };
    var val = this.value;
    if(was === true){
        switch(val.length){
            case 3:
                if(e.charCode !== 0){
                this.value += "-";
                }
                break;
            case 6:
                if(e.charCode !== 0){
                this.value += "-";
                }
                break;
            default:
                if(val.length > 10 && e.charCode !== 0){return false;};
                break;

        };
        val += e.charCode;
    }
    else{
        return false;
    };

};
</script>
</body>

I tested it in ff

0
source

Source: https://habr.com/ru/post/1525959/

More articles:


All Articles