Help fixing this validate name system

Authoring Twine
, ,
1

I’m trying make a sort of Character Creation part for my game, I got a system to input a name, (First and then a Last Name), and also validate, to check if it’s A-Z/a-z and no numbers, it was working fine, last night, but I don’t know if something I changed or what, made it break and display “validateName” is not defined?
The Passage:

First Name: \
<input id="firstNameInput" type="text" oninput="validateName(this, 'firstNameError', 'first_name')"> \
<p id="firstNameError" style="color:red; display:none;">Please use only letters (A-Z, a-z).</p> \
<<set $first_name = "">> \
\
Last Name: \
<input id="lastNameInput" type="text" oninput="validateName(this, 'lastNameError', 'last_name')"> \
<p id="lastNameError" style="color:red; display:none;">Please use only letters (A-Z, a-z).</p> \
</div> \
<<set $last_name = "">> \
\

Javascript:

function validateName(input, errorElementId, variableName) {
    var namePattern = /^[A-Za-z]*$/;

    // Check if the input value matches the allowed pattern (A-Z, a-z)
    if (namePattern.test(input.value)) {
        // Valid input: hide error message
        document.getElementById(errorElementId).style.display = 'none';
        // Store the input in the corresponding SugarCube variable
        SugarCube.State.variables[variableName] = input.value;
    } else {
        // Invalid input: show error message and remove invalid characters
        document.getElementById(errorElementId).style.display = 'block';
        input.value = input.value.replace(/[^A-Za-z]/g, '');
    }
}

Hope someone can help me figure out the issue? As I can’t seem to come across what broke today

2

It’s a scope issue. Functions defined in the Javascript section are not available outside of it. To get around it, you can use the window object, like this:

window.validateName = function(input, errorElementId, variableName) {
    /*your code*/
}

Note that since window also contains other function/property definitions, when defining functions like this it’s usually better to use the setup object instead (replace window with setup in the above code, then call it with setup.validateName()).

However, in this specific case you’re calling the function from the attibutes of an HTML tag, so setup wouldn’t work because of more scope issues.

3

You could use the <<textbox>> SugarCube macro instead of an <input> element. And with a combination with a button to check if all is fine.
TBH, if you indicate First/Last Name to input, people don’t indicate numbers… <>

Like:

<<textbox "$name" "Enter here">>
<span id="error></span>

<<button "Confirm">>
    <<if $name.includesAny(0, 1, 2, 3, "other value")>>
         <<replace "#error">>Please enter a proper value<</replace>>
     <<elseif ["Some Names", "You Want to Restrict", "Charles"].includes($name)>>
          <<replace "#error">>Please enter a different name<</replace>>
     <<else>>
         <<goto "Next Passage">>
         /*or something else*/
<</button>>

Since strings are essentially an array of characters, you can use the .includes() functions to check stuff up too.

If you still want to use your function with the example above, you can call it with the <<run>> macro inside the button.

Also, I made a Character creator template some time ago, you might find it helpful.

1 Like
4

That fixed it, I’m not sure what made it break? Last night it was working fine like this, weird, but glad it’s working now :smiley: