Validation input field Fullname(Firstname,Lastname) - JavaScript

Question

Need validation for full name(first name/last name - 1 input field). I'm new in this sphere and can't formulate the right syntax maybe will work with a regular expression too

<form name="myForm" action="#" id="form" onsubmit="return validateForm()" method="POST">
            <div class="field"><span class="input"><i class="fas fa-user-alt"></i>
                    <input type="text" id="name" name="Fullname" placeholder="Full Name" >
                </span>


function validateForm() {
var name= document.getElementById('name').value;
var x = name.indexOf(" ");
var fname = name.substring(0, x);
var lname = name.substring(x).trim();
if ( 17 < fname.value.length < 5 || 4 > lname.value.length > 17 || x.value.length != 1) {
    alert("try again")
    return false;
 }
 alert("OK")
return true;
}

The field (1 field) should contain 2 words which should be from 3 to 20 symbols.

EDIT:It seems work..finally!

function input (name) {
  let fullNameArr = name.split('')
  const space = ' '
  let firstName = ''
  if (fullNameArr.includes(space)) {
    for (let i = 0; i < fullNameArr.length; i++) {
      if (!firstName.includes(space)) {
        firstName += fullNameArr[i]
      }
    }
  }
  firstName = fullNameArr.splice(0, firstName.length)
  const lastName = fullNameArr
  if (firstName.length > 3 && firstName.length <= 21 && lastName.length >= 3 && lastName.length <= 20 && lastName.includes(space) === false) {
    console.log(firstName)
    console.log(lastName)
  } else {
    console.log('Invalid Name')
    return false
  }
}
input('Todor Markov')

Typically I see this17 < fname.value.length < 5 as fname.value.length < 21 && fname.value.length > 2 for your 3 to 20 — Mark Schultheiss
– Mark Schultheiss, Commented Apr 24, 2019 at 13:30
17 < fname.value.length < 5 with "foobar" as fname.value, this will be executed like this : 17 < "foobar".length < 5 => 17 < true => false. So 17 < fname.value.length < 5 will always be evaluated to false — Seblor
– Seblor, Commented Apr 24, 2019 at 13:30
@greedchikara Be careful with \w, since it does not match accentuated letters. For example /^\w{3,20} \w{3,20}$/.test("Sébastien Lor") evaluates to false. — Seblor
– Seblor, Commented Apr 24, 2019 at 13:36

Caleb Davenport · Accepted Answer · 2019-04-24 13:37:22Z

1

Your model makes several assumptions about names. Having first name and last name as separate input boxes is typically done to remove this barrier.

From a UX standpoint, if you were not going to have separate fields, you'd need some validation with a tooltip that checked if the user has more than one space that alerts them they must type FirstName LastName.

From a regex validation view, here's a catch all to ensure it's valid.
/^[a-z ,.'-]+$/i.test("Johnny 'Van' Pat-ton Jr.") No numbers, but allow letters and the special characters ,.'-.

answered Apr 24, 2019 at 13:37

Caleb Davenport

6336 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Seblor Over a year ago

Your regex won't match accentuated letters, which are very common in many non-english names.

Brizzydox Pictures · Accepted Answer · 2023-10-21 06:04:50Z

0

function input (name) {
  let fullNameArr = name.split('')
  const space = ' '
  let firstName = ''
  if (fullNameArr.includes(space)) {
    for (let i = 0; i < fullNameArr.length; i++) {
      if (!firstName.includes(space)) {
        firstName += fullNameArr[i]
      }
    }
  }
  firstName = fullNameArr.splice(0, firstName.length)
  const lastName = fullNameArr
  if (firstName.length > 3 && firstName.length <= 21 && lastName.length >= 3 && lastName.length <= 20 && lastName.includes(space) === false) {
    console.log(firstName)
    console.log(lastName)
  } else {
    console.log('Invalid Name')
    return false
  }
}
input('Todor Markov')

answered Oct 21, 2023 at 6:04

Brizzydox Pictures

1

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Validation input field Fullname(Firstname,Lastname) - JavaScript

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related