I have a series of Javascript codes, I need help with a couple

JavaScript
1

The only things I need changed and added to the following code is to only allow 1 @ in the email, and in the names to force only the first letter (of each word) capitalized and the rest of that name forced small, numbers or special characters. I can probably figure it out if you just give me the codes or you could also help me fit it into my current code:

function handleNameFieldKeypress (target, evt) {
    console.log('handleNameFieldKeypress ... target ...', target);

    const char = String.fromCharCode(evt.which);
    const { selectionStart } = target;

    const isNotValid = (selectionStart === 0 && (

        evt.code === 'Space' || !/^[a-zA-Z]$/.test(char)

    )) || (

        char === ' ' &&
        target.value.charAt(selectionStart - 1) === ' '
    );

    if (isNotValid) {
        evt.preventDefault();
    }
}

function handleEmailFieldKeypress (target, evt) {
    console.log('handleEmailFieldKeypress ... target ...', target);

    const { selectionStart } = target;

    const isNotValid =
        (selectionStart === 0 && evt.code === 'Space') || (

            String.fromCharCode(evt.which) === '@' &&
                target.value.charAt(selectionStart - 1) === '@') || (    

            String.fromCharCode(evt.which) === '@' &&
                target.value.charAt(selectionStart - 1) === '.') || (   

            String.fromCharCode(evt.which) === '.' &&
                target.value.charAt(selectionStart - 1) === '@') || (   

            String.fromCharCode(evt.which) === '.' &&
                target.value.charAt(selectionStart - 1) === '.' 
        );

    if (isNotValid) {
        evt.preventDefault();

        return;
    }
    const key = evt.keyCode || evt.charCode || evt.which;

    return (key !== 32) && key;
}

function handleInputFieldKeypress (evt) {
    const { target } = evt;
    let result;

    if (target.matches('input[name="real_name"], input[name="display_name"]')) {

        result = handleNameFieldKeypress(target, evt);
    } else if (target.matches('input[name="email"]')) {

        result = handleEmailFieldKeypress(target, evt);
    }
    
    return result;
}

document
    .addEventListener('DOMContentLoaded', () => {
        document
            .querySelector('form')
            .addEventListener('keypress', handleInputFieldKeypress);
    });
2

Very similar answers to both…

If the length of the thing you get when you split the string on “@” is 2, there was exactly 1 “@” in the string.

If you toLowerCase the string, split it on " ", toUpperCase the first letter of each part, and then glue the string back together…

3

To be honest, i don’t understand any of that. I had a lot of help with this code, I didn’t do much to it. I was hoping someone could give me the proper code please?

4

Can I ask why HTML isn’t an option for this?

<form action="">
    <label for="real_name">Real Name</label>
    <input 
        type="text" 
        name="real_name" 
        id="real_name" 
        pattern="[a-zA-Z]+" 
        placeholder="letters only, no spaces"
        required
    >

    <label for="display_name">Display Name</label>
    <input 
        type="text" 
        name="display_name" 
        id="display_name" 
        pattern="[a-zA-Z]+" 
        placeholder="letters only, no spaces"
        required
    >

    <input type="submit" value="Submit">
</form>

Wouldn’t preventing certain buttons from being pressed, like the TAB key, hinder your code for accessibility?

2 Likes
5

No thank you rpg_digital, I need the javascript, even if I can’t get help and I have to pay for it.

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.