Coordinates validation

I have text field for coordinates and i would like to vlaidate it using vee-validate (3.x) and vue 2. I have tried two different aproches, but neither of them work. The format should be in format "int or float,int or float" "latitude,longitude" (with only one coma, multiple comas should be flagged as invalid)

This is the textfield:

<ValidationProvider v-slot="{ errors }" rules="coordinates_validation">
            <v-text-field
              :label="$t('stations.position')"
              :value="positionValue"
              :error-messages="errors"
              @input="$emit('update:station', { ...station, ...getLatLong($event) })"
              @keypress="justNumber"
            />
</ValidationProvider>

These are the two aproches i have tried, but neither of them work:

extend("coordinates_validation", {
  validate: (value) => {
    const coordinates = value.split(",");

    if (coordinates.length !== 2) {
      return false;
    }

    const trimmedCoordinates = coordinates.map((coord) => coord.trim());

    const isValidCoordinate = (coord) => {
      return !Number.isNaN(parseFloat(coord)) && Number.isFinite(coord);
    };

    return (
      trimmedCoordinates.every(isValidCoordinate) &&
      !trimmedCoordinates.some((coord) => coord === "")
    );
  },
  message: i18n.tc("validations.coordinates_incorrect_format"),
});

extend('coordinates_validation', {
  validate: (value) => {
    const regex = /^\d+(\.\d+)?,\s*\d+(\.\d+)?$/;
    return regex.test(value);
  },
  message: i18n.tc('validations.coordinates_incorrect_format'),
});

Does anybody know how to solve this?

When in doubt, console.log it out

See my codesandbox where I console.log each step of your validation, splitting big steps into smaller steps where necessary.

For your first attempt, the problem is Number.isFinite always returning false. This is because you feed it a string coord but Number.isFinite expects a number. The fix is then:

Number.isFinite(parseFloat(coord))

Your initial value.split also only works with comma ,. I suggest splitting on space , comma , and comma + any amount of space ,

const coordinates = value.split(/[,\s]\s*/);

For your second attempt using just regex, I see nothing wrong. I put the code in the same codesandbox and when used as the validation method it works perfectly.