My validations for phone number are overlapping over each other in form component. What to do?

This is my phone number schema, I want to show one validation at a time or I dont want the validation to text overlap each other. Any solution?

defmodule Appeo.Contacts.PhoneNumber do
  use Ecto.Schema
  import Ecto.Changeset

  schema "phone_numbers" do
    field :phone_number, :string

    belongs_to :company_contact, Appeo.Contacts.CompanyContact,
      foreign_key: :company_contact_id,
      references: :id

    belongs_to :contact, Appeo.Contacts.Contact, foreign_key: :contact_id, references: :id

    timestamps()
  end

  @doc false
  def changeset(phone_number, attrs) do
    phone_number
    |> cast(attrs, [:phone_number])
    |> validate_required([:phone_number])
    |> validate_format(
      :phone_number,
      ~r/^\s*(?:\+?(\d{1,3}))?([-. (]*(\d{3})[-. )]*)?((\d{3})[-. ]*(\d{2,4})(?:[-.x ]*(\d+))?)\s*$/,
      message: "Enter a valid phone number"
    )
    |> validate_length(:phone_number, max: 15)
  end
end

It seems that you can use a function, which checks whether the changeset is valid or not.
It may be a macros like:

  defmacro changeset ~> function do
    quote do
      case unquote(changeset) do
        %{valid?: true} = changeset -> changeset |> unquote(function)
        changeset -> changeset
      end
    end
  end

So, with that macros you can write your changeset like:

  @doc false
  def changeset(phone_number, attrs) do
    phone_number
    |> cast(attrs, [:phone_number])
    |> validate_required([:phone_number])
    ~> validate_format(
      :phone_number,
      ~r/^\s*(?:\+?(\d{1,3}))?([-. (]*(\d{3})[-. )]*)?((\d{3})[-. ]*(\d{2,4})(?:[-.x ]*(\d+))?)\s*$/,
      message: "Enter a valid phone number"
    )
     ~> validate_length(:phone_number, max: 15)